jQuery上一期和下一期

我是jQuery的初学者

我有三个盒子。每个框都有自己的上一个/下一个导航。当我点击任何框时，文本会移动，这很好。但当我点击除第一个导航外的上一个/下一个导航时，它不会移动。请指导我如何解决这个问题

请检查示例以更好地理解我的需求

---

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

---

我已经修改了您的JSFIDLE，现在它可以工作了：

ID应该是唯一的，您不能有重复的ID。我修改了您的标记，然后更新了脚本，如下所示

JS:

HTML：将所有ID更改为类

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

---

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

小提琴：

JavaScript只有一行：

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

HTML:

---

您有多个具有相同id的元素。这是一个很好的开始…id应该是唯一的。你有下一个和上一个链接的重复ID

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

<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>​