どのようにして、1ページに重複したJQueryプラグインを実行できないのですか？

Question

私は最近、http://www.mclelun.com/labs/#jqbannerからJQueryローテーションバナープラグインをダウンロードしました。私は自分のページに1つの回転バナーがあるときはうまく機能することに気付きましたが、別のものを追加しようとすると、そのうちの1つだけを追加しようとすると、最初の回転バナーが動作します。 2つ目は動作しません。

両回転バナーを同時に動作させるにはどうすればよいですか？

//########################################## 
//###### The first Banner rotator ########## 
//########################################## 

<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.3.2/jquery.min.js" type="text/javascript"></script> 
<script src="jqbanner.js" type="text/javascript"></script> 
<link rel="stylesheet" type="text/css" media="screen" href="jqbanner.css" /> 

があなたのページの画像がバナーを回転させるためのものであるスクリプトを伝えるためにバナーのリストを含める：

以下は私のコードです。

<div id="jqb_object"> 

<div class="jqb_slides"> 
<div class="jqb_slide" title="slide title" ><a href="slide link"><img src="banner1.jpg"/></a></div> 
<div class="jqb_slide" title="slide title" ><a href="slide link"><img src="banner2.jpg"/></a></div> 
<div class="jqb_slide" title="slide title"><a href="slide link"><img src="banner3.jpg"/></a></div> 
<div class="jqb_slide" title="slide title" ><span>TEXT SLIDE IN DIV</span></div></div> 

<div class="jqb_bar"> 
<div class="jqb_info"></div> 
<div id="btn_next" class="jqb_btn jqb_btn_next"></div> 
<div id="btn_pauseplay" class="jqb_btn jqb_btn_pause"></div> 
<div id="btn_prev" class="jqb_btn jqb_btn_prev"></div> 
</div> 

</div> 

上記は機能します。しかし、私は以下のコードのような新しいバナーを追加しようとすると、第二のバナー回転子は動作しません。

//########################################## 
//###### The second Banner rotator ######### 
//########################################## 

<div id="jqb_object"> 

<div class="jqb_slides"> 
<div class="jqb_slide" title="slide title" ><a href="slide link"><img src="banner1.jpg"/></a></div> 
<div class="jqb_slide" title="slide title" ><a href="slide link"><img src="banner2.jpg"/></a></div> 
<div class="jqb_slide" title="slide title"><a href="slide link"><img src="banner3.jpg"/></a></div> 
<div class="jqb_slide" title="slide title" ><span>TEXT SLIDE IN DIV</span></div></div> 

<div class="jqb_bar"> 
<div class="jqb_info"></div> 
<div id="btn_next" class="jqb_btn jqb_btn_next"></div> 
<div id="btn_pauseplay" class="jqb_btn jqb_btn_pause"></div> 
<div id="btn_prev" class="jqb_btn jqb_btn_prev"></div> 
</div> 

</div> 

Answer 1

あなたが同じIDを持つ2つの要素があることを見ることができます。追加した場合<div id="jqb_object">

を-inはこのidを持つ要素を選択することに基づいて動作していますが、idで指定されたセレクタに一致すると、jQueryはページ内で最初に見つかった要素を返します。

したがって、idは2番目のdivでコードが実行されることはありません。

---

あなたは（要素の数を識別するために使用されるべきである）、複数のバナーを持っているクラスを持つ要素上で動作するコードを更新すると、複数のdivを持っている場合：

例えば選択することができ<div id="banner1" class="jqb_object">と<div id="banner2" class="jqb_object">、：

$('.jqb_object') 

あなたが使って実験を開始したい行がjqbanner.jsあるように見えます：71

$("#jqb_object").find(".jqb_slide") 

スタート

$('.jqb_object').find('.jqb_slide') 

Answer 2

を試みることでは

StuperUserが言ったことに加えて、これに加えて -

私はあなたが使用しているプラ​​グイン、jqbannerは、ページに1つのバナーしか持たないという考えで設計されています。それ以外の場合は、複数のオブジェクトを呼び出すメソッドを持つように構築されます。例えば

、あなたが望むようにのように似た何かをjQuery Cycle plugin、と、あなたは、できるだけ多くのオブジェクトのサイクルメソッドを呼び出すことができます。

$('#div_id_1, #div_id_2').cycle(); 

これはまた、ID年代がする必要がある理由について授業では、一意である必要があります。つまり、ページごとにIDのインスタンスを1つだけ持つことができます。どちらのバナーも同じIDを持ち、この衝突につながります。