Question

我是jQuery的初学者。

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

请查看示例以更好的方式了解我的要求。

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

由于

Answer 1

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

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

Answer 2

ID应该是唯一的，您不能拥有重复的ID。我修改了你的标记，然后像下面那样更新了脚本，

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：（将所有ID更改为类）

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

Answer 3

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

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

Answer 4

小提琴：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>

jQuery上一个和前进的问题

4 个答案: