使用下一个和上一个按钮滑过div

Question

I am trying to slide through 2 different divs on my page with 2 buttons - next and previous.

it is basically like a setup wizard that you see while installing a software.

so here is the mark up:

<div id="container">

        <div id="box1" class="box">
            <button id="nxt">Next</button>
            <button id="prv">Previous</button>
        </div>
        <div id="box2" class="box">
            <button id="nxt">Next</button>
            <button id="prv">Previous</button>
        </div>

    </div>

and here is the JQuery for both buttons:

$('#nxt').click(function() {

                    $(this).parent(".box").animate({left: '-150%'}, 500 );
                    $(this).parent(".box").next(".box").animate({left: '50%'},500);
        });
 $('#prv').click(function() {

            $(this).parent(".box").animate({left: '150%'}, 500 );
            $(this).parent(".box").prev(".box").animate({left: '50%'},500);
            });

I am able to do perform the "next" operation but not the "previous" one, there is a mistake with jquery, please help me with that.

you can also have a glance at this fiddle

Thank You

Answer 1

You must not use same ids for multiple elements. Use class attribute instead, see below markup and jquery;

HTML: Change id to class for previous and next buttons

<div id="container">
    <div id="box1" class="box">
       <button class="nxt">Next</button>
       <button class="prv">Previous</button>
    </div>
    <div id="box2" class="box">
       <button class="nxt">Next</button>
       <button class="prv">Previous</button>
    </div>

</div>

jQuery: make changes in jquery selector for class attribute and keep rest of the code as it is.

$('.nxt').click(function() {
    $(this).parent(".box").animate({left: '-150%'}, 500 );
    $(this).parent(".box").next(".box").animate({left: '50%'},500);
});

$('.prv').click(function() {    
    $(this).parent(".box").animate({left: '150%'}, 500 );
    $(this).parent(".box").prev(".box").animate({left: '50%'},500);
});

JSFiddle Demo

Answer 2

you have just missed .animate({left: '-50%'} in $('#prv').click(function(){}

JSFiddle link

Answer 3

You use same id for buttons in first div and in second div. It is not right and that's the source of problem. Check out this fiddle to see right version.

 $('#nxt').click(function() { $(this).parent(".box").animate({left: '-150%'}, 500 ); $(this).parent(".box").next(".box").animate({left: '50%'},500); }); $('#prv1').click(function() { $(this).parent(".box").animate({left: '150%'}, 500 ); $(this).parent(".box").prev(".box").animate({left: '50%'},500); }); 

 #container { position: absolute; margin: 0px; padding: 0px; width: 100%; height: 100%; overflow: hidden; } .box { position: absolute; width: 50%; background-color: white; height: 500px; line-height: 300px; font-size: 50px; text-align: center; border: 2px solid black; left: 50%; top: 100px; margin-left: -25%; } #box2 { left: 150%; } 

 <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> <div id="container"> <div id="box1" class="box"> <button id="nxt">Next</button> <button id="prv">Previous</button> </div> <div id="box2" class="box"> <button id="nxt1">Next</button> <button id="prv1">Previous</button> </div> </div>