Шаги Jquery - как дублировать следующие и предыдущие кнопки? Например, для использования сверху и снизу

#javascript #jquery #jquery-steps

#javascript #jquery #jquery-шаги

Вопрос:

Я надеюсь, что кто-нибудь сможет мне в этом помочь. По сути, я использую Jquery Step, «Пример вертикальных шагов» на http://www.jquery-steps.com/Examples

Я пытаюсь дублировать кнопки «next» и «previous», чтобы они располагались как вверху, так и внизу области содержимого, потому что на каждом шаге у меня довольно много текстов и изображений.

Может кто-нибудь помочь в том, как дублировать эти кнопки? Пример кода, который я использую, приведен ниже:

     <script>
            $(function ()
            {
                $("#wizard").steps({
                    headerTag: "h2",
                    bodyTag: "section",
                    transitionEffect: "slideLeft",
                    stepsOrientation: "vertical"
                });
            });
    </script>

    <div id="wizard">
        <h2>Title One</h2>
        <section>
            <p>Content for Title One</p>
        </section>

        <h2>Title Two</h2>
        <section>
            <p>Content for Title Two</p>
        </section>

    </div>

Ответ №1:

Попробуйте это:

 $('#wizard').prepend($('#wizard .actions').clone().addClass("top-actions"));

//then add event


$('#wizard .top-actions').on("click", ".btn", function (e) {

    var $element = $(this);

    //console.log($element);

    if ($element.hasClass("prev") == true) {
        $('#wizard .actions:not(.top-actions) a[href="#previous"]').click();
    }

    if ($element.hasClass("next") == true) {
        $('#wizard .actions:not(.top-actions)  a[href="#next"]').click();
    }

});

1. спасибо за вашу помощь, но, к сожалению, это, похоже, не работает

2. Я не заметил, что вы используете ID:

3. не уверен, что это сработает: $(‘#wizard’).prepend($(‘#wizard .actions’).clone().addClass(«top-actions»))

4. Спасибо за помощь. На самом деле я решил это совершенно другим методом

Ответ №2:

Я использовал этот код для дублирования кнопок и работает.

 $("div.actions").insertBefore("div.content").clone().insertAfter("div.content").addClass("footer_buttons_steps");
    $("#buysteps .footer_buttons_steps a").on("click", function(){

        if( $(this).attr("href") == "#previous" ){
            $("#buysteps .actions:not('.footer_buttons_steps') a[href='#previous']").click();
        }

        if ($(this).attr("href") == "#next") {
            $("#buysteps .actions:not('.footer_buttons_steps') a[href='#next']").click();
        }            

    });