19

同じIDのボタンが3つあります。クリックされたときに各ボタンの値を取得する必要があります。

<button id="xyz" type="button" class="btn btn-primary" value="1">XYZ1</button>
<button id="xyz" type="button" class="btn btn-primary" value="2">XYZ2</button>
<button id="xyz" type="button" class="btn btn-primary" value="3">XYZ3</button>

これが私の現在のjQueryスクリプトです：

$("#xyz").click(function(){
      var xyz = $(this).val();
      alert(xyz);
});

ただし、最初のボタンに対してのみ機能し、他のボタンのクリックは無視されます。

4

7 に答える 7

45

同じIDのボタンが3つあります...

無効なHTMLがあります。id同じ属性値を持つページに複数の要素を含めることはできません。

仕様の引用：

7.5.2要素識別子：idおよびclass属性

id = name [CS]
この属性は、要素に名前を割り当てます。この名前は、ドキュメント内で一意である必要があります。

解決策：からidに変更class：

<button type="button" class="btn btn-primary xyz" value="1">XYZ1</button>
<button type="button" class="btn btn-primary xyz" value="2">XYZ2</button>
<button type="button" class="btn btn-primary xyz" value="3">XYZ3</button>

そしてjQueryコード：

$(".xyz").click(function(){
    alert(this.value);
    // No need for jQuery :$(this).val() to get the value of the input.
});

ただし、最初のボタンでのみ機能します

jQuery#idセレクタードキュメント：

各id値は、ドキュメント内で1回だけ使用する必要があります。複数の要素に同じIDが割り当てられている場合、そのIDを使用するクエリは、DOMで最初に一致した要素のみを選択します。ただし、この動作に依存するべきではありません。同じIDを使用する複数の要素を持つドキュメントは無効です。

$id selecor-（ ）を使用して呼び出すとわかるjQueryソースを見ると$("#id")、jQueryはネイティブのjavascriptdocument.getElementById関数を呼び出します。

// HANDLE: $("#id")
} else {
    elem = document.getElementById( match[2] );
}

彼らの仕様ではdocument.getElementById、最初の値を返さなければならないとは述べていませんでしたが、これはほとんどの（おそらくすべて？）ブラウザがそれを実装した方法です。

デモ

于 2012-06-20T07:18:21.007 に答える
6

IDは「識別子」を意味し、ドキュメントごとに1回だけ有効です。この時点でHTMLが間違っているため、一部のブラウザはそのIDで最初に出現する要素を選択し、最後に出現する要素を選択します。

名前のIDを変更することは良いステップです。

次に、$('button[name="xyz"]').click(function(){

于 2012-06-20T07:20:31.720 に答える
0

idはページHTMLで一意であるため、同じIDを持つことはできません。クラスまたは他の属性名に変更します。

$('attributename').click(function(){ alert($(this).attr(attributename))});
于 2012-06-20T07:52:28.443 に答える