jqueryの関数が同じID

Question

を持つ2枚の画像に対して実行することはできませんなぜ私は画像

$(document).ready(function() { 
     $("#to-get-bigger").mouseover(function() { 
      $(this).effect("bounce", { time: 3, distance: 40 }); 
     }); 
    }); 

と私は2次したビュー上をバウンスするために私のasp.net MVCアプリケーション内で次のスクリプトを持っています同じIDの画像： -

<a href="@Url.Action("StartAssessment", "StartAssessment", new { assessmentid = Model.AssessmentID })" 
onclick = "return confirm('This will make the Assessment avilable for the regestred user.')" > 
    <img id = "to-get-bigger" border="0" src="@Url.Content("~/content/images/assessment-button1.jpg")" alt="start assessment" /> 
</a> 

<a href="@Url.Action("StartAssessment", "StartAssessment", new { assessmentid = Model.AssessmentID })" 
onclick = "return confirm('This will make the Assessment avilable for the regestred user.')" > 
    <img id = "to-get-bigger" border="0" src="@Url.Content("~/content/images/assessment-button1.jpg")" alt="start assessment" /> 
</a> 

しかし、問題は、それが第二の画像上では動作しませんしながら、私は読んだことがあるが、jQueryの機能のみが,,実行し、一つの画像をバウンスすることで、この中にjQueryのセレクタこの場合、#to-get-biggerはこのIDを持つすべての要素を返します。 dユーザーが目的の要素のいずれかにマウスを移動すると、Jquery関数が実行されますか？ BR

Answer 1

複数の要素が同じidの場合、このような問題が発生します。 id属性は一意である必要があります。 、単一の属性を持つ複数の要素を参照するclassを使用するには：

HTML

<a href="@Url.Action("StartAssessment", "StartAssessment", new { assessmentid = Model.AssessmentID })" onclick="return confirm('This will make the Assessment avilable for the regestred user.')" > 
    <img class="to-get-bigger" border="0" src="@Url.Content("~/content/images/assessment-button1.jpg")" alt="start assessment" /> 
</a> 

<a href="@Url.Action("StartAssessment", "StartAssessment", new { assessmentid = Model.AssessmentID })" onclick="return confirm('This will make the Assessment avilable for the regestred user.')"> 
    <img class="to-get-bigger" border="0" src="@Url.Content("~/content/images/assessment-button1.jpg")" alt="start assessment" /> 
</a> 

jQueryの

$(document).ready(function() { 
    $(".to-get-bigger").mouseover(function() { 
     $(this).effect("bounce", { time: 3, distance: 40 }); 
    }); 
}); 

Answer 2

IDは一意である必要があります。 jQueryが使用するnative javascriptメソッドdocument.getElementById()は、特定のIDで見つかった最初の要素のみを返します。

jQuery by IDを使用して要素を選択すると、そのIDを持つ有効な要素が1つしかないため、要素が1つ返されます。たとえユニークなIDを使用していない場合でも、すべてのブラウザで動作するわけではありませんが、jquery cornerプラグインなどで動作することがわかっていますが、いくつかのエッジケースがあります。

Answer 3

いいえ、それはに-GET-大きな1つのIDという名前の＃のコレクションを取得します、IDはページ上でuniqeでなければなりません。代わりにcssクラスを使用する必要があります。 http://www.w3.org/TR/html4/struct/global.html#h-7.5.2は、どのように動作するかについてw3c仕様を提供します。