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 的元素，您可以做的是给它们相同的类，然后在其上添加事件处理程序。

例子：

<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()内部实现，这只会（正确地）返回它遇到的第一个元素 that id。

在您的情况下，您应该使用 a classof 方向，并根据该方向进行选择：

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

Answer 3

您不能有两个具有相同 id 的元素，如果您想一次引用多个元素，请使用类，例如：

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

然后在你的脚本中：

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