jQuery前後の問題

Question

私はjQueryの初心者です。

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

私の要件をよりよく理解するために例を確認してください。

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

おかげ

Answer 1

同じIDを複数の要素に割り当てました。これは主要なプロです傷み。

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

Answer 2

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

私はあなたのjsFiddleを変更した、と今では動作します：http://jsfiddle.net/nWqGf/11/

Answer 3

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