jquery - jQuery Previous and Forward issue

Question

I am beginner in jQuery.

I have three boxes. Every box has its own Prev/Next navigation. When I click on any box, text move, which is fine. But when I click on Prev/Next navigation (except first one) it doesn’t move. Please guide me how can I fix that?

Please check the example to understand my requirement in a better way.

http://jsfiddle.net/awaises/nWqGf/1/

Thanks

Answer 1

您多次使用相同的 ID。您应该为这些按钮使用一个类，并使用另一个属性将其与正确的框相关联。

我已经修改了你的 jsFiddle，现在它可以工作了：http: //jsfiddle.net/nWqGf/11/

Answer 2

ID should be unique, You cannot have duplicate ID's. I modified your markup and then updated the script like below,

DEMO

JS:

$(".gallery-prev").click(function(){
    $(this).parent().find(".scroll").data("scrollable").prev();
    });

$(".gallery-next").click(function(){
     $(this).parent().find(".scroll").data("scrollable").next();
    });
});

HTML: (Changed all ID to class)

<a href="#" class="gallery-prev">Prev</a>
<a href="#" class="gallery-next">Next</a>

Answer 3

小提琴：http: //jsfiddle.net/iambriansreed/vGnuS/

JavaScript（只有一行）：

$(".scroll").scrollable({ circular: true });​

HTML：

<script src="http://cdn.jquerytools.org/1.2.6/jquery.tools.min.js"></script>
<div class="gallery">
    <a href="#" class="prev">Prev</a>
    <a href="#" class="next">Next</a>
    <br />
    <div class="scroll">
        <div class="pics">
            <div>box 1</div>
            <div>box 2</div>
            <div>box 3</div>
            <div>box 4</div>
            <div>box 5</div>
        </div>
    </div>
</div>

<div class="gallery">
    <a href="#" class="prev">Prev</a>
    <a href="#" class="next">Next</a>
    <br />    
    <div class="scroll">
        <div class="pics">
            <div>box 6</div>
            <div>box 7</div>
            <div>box 8</div>
            <div>box 9</div>
            <div>box 10</div>
        </div>
    </div>
</div>

<div class="gallery">
    <a href="#" class="prev">Prev</a>
    <a href="#" class="next">Next</a>
    <br />

    <div class="scroll">
        <div class="pics">
            <div>box 11</div>
            <div>box 12</div>
            <div>box 13</div>
            <div>box 14</div>
            <div>box 15</div>
        </div>
    </div>
</div>​

Answer 4

您已将相同的 Id 分配给多个元素，这是一个主要问题。相反，你应该做的是：

http://jsfiddle.net/nWqGf/9/