jQueryこのセレクタが動作していないImage

Question

同じIDの「mashupButton」の画像がたくさんありますが、「＃」の代わりに「this」を使用してjQueryのクリック機能を作成すると、 mashupButton "をクリックすると、クリックされた画像に対してのみ機能が実行されます。これは私にとっては効果的ですが、ページ上にそのIDを持つ最初の画像だけが表示され、一度やった後はもう機能しません。文書の後

は準備ができている：

$("#mashupButton").click(function() 
       { 
        $(this).effect("drop", {direction:"up"}, 1000); 
       }); 

タグは次のようである：

<a href="#" onClick="differentFunction"><img src="imagename.png" id="mashupButton"></a> 

だから、明確にする： 私はID mashupButtonと10枚の画像すべてを言って持っている - 私は、jQueryの効果を持っていますその特定の画像がクリックされるとその特定の画像に対して実行される。しかし、それらはすべて同じIDを含んでいますが、それらの画像の最初のものでのみ動作します。それぞれに固有のIDを持つ必要があるのですか、それとも何とかこのように実現できますか？

Answer 1

代わりにそれらの画像のクラスを作成し、jQueryを使用してすべての画像にクリックを追加します。

$(".mashupButton").click(function() 
       { 
        $(this).effect("drop", {direction:"up"}, 1000); 
       }); 


<a href="#" onClick="differentFunction"><img src="imagename.png" class="mashupButton"></a> 

Answer 2

「id」属性の値は、ページ内で一意のである必要があります。イメージの "束"の "id"として "mashupButton"を再使用するのは正しいマークアップではありません。各<img>タグには、固有の "id"（または "id"がありません）が必要です。 「クラス」属性を使用して、そのような<img>要素を「クリック」ハンドラの候補としてマークすることができます。私が持っている

Answer 3

は、同じIDを持つ複数の要素を持っていることは違法であるID mashupButton

で10枚の画像すべてを言います。

セレクタを1つ使用する場合は、クラス名を追加する必要があります。

Answer 4

@ Pointyの答えを拡張するには...はい、id値は一意でなければなりません。マークアップを変更できる場合は、単にid属性をclass属性に変更します。あなたが構文的に無効なページを持っている

$('.mashupButton').click(function() ... 

Answer 5

：

<img src="imagename.png" class="mashupButton" ... 

次に、あなたのjQueryのは次のようになります。問題が発生した場合は、さらに先に調べる前に、常にvalidate your HTML（およびvalidate your CSS）にする必要があります。