jquery - 多くのボタン、jquery

Question

jQuery :

$("#direction").click(function() {
    var direction = $(this).text();
    alert(direction);
}

HTML

<button id="direction">South</button>
<button id="direction">North</button>

最初のボタンのみがテキストを警告します。理由がわかりません。どうすればこれを修正できますか?

Answer 1

同じ ID を持つ 2 つの要素を持つことはできません。できることは、それらに同じクラスを与えてから、それにイベント ハンドラーを追加することです。

例：

<button class="directionBtn">South</button>
<button class="directionBtn">North</button>

$(".directionBtn").click(function() {
                var direction = $(this).text();
                alert(direction);
});

Answer 2

同じ要素を複数持つことは無効ですid(ドキュメント内で一意であるid 必要があります)。jQuery はおそらくdocument.getElementById()内部的に実装されているため、これは、最初に遭遇した要素のみを (正しく) 返しidます。

あなたの場合class、方向を使用し、それに基づいて選択する必要があります。

$('.direction').click(
    function(){/*...*/});

Answer 3

同じ id を持つ 2 つの要素を持つことはできません。一度に複数の要素を参照する場合は、次のようなクラスを使用します。

<button class="direction">South</button>
<button class="direction">North</button>

そして、あなたのスクリプトで：

 $(".direction").click(function() {
    var direction = $(this).text();
    alert(direction);
});