jquery - jQueryの以前の問題と今後の問題

Question

私はjQueryの初心者です。

私は3つの箱を持っています。すべてのボックスには、独自の前/次のナビゲーションがあります。ボックスをクリックすると、テキストが移動します。これで問題ありません。しかし、前/次のナビゲーション（最初のナビゲーションを除く）をクリックしても移動しません。どうすれば修正できますか？

例を確認して、私の要件をよりよく理解してください。

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

ありがとう

Answer 1

同じIDを複数回使用しています。これらのボタンのクラスと、それを正しいボックスに関連付けるための別の属性を使用する必要があります。

jsFiddleを変更しましたが、動作します：http: //jsfiddle.net/nWqGf/11/

Answer 2

IDは一意である必要があります。重複するIDを持つことはできません。マークアップを変更してから、次のようにスクリプトを更新しました。

デモ

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（1行のみ）：

$(".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>​