javascript - 为什么这个 JavaScript 并不总是有效？

Question

我正在使用自定义data-使用 jQuery 的元素。

这是 HTML:

<div id="chat" data-chat-name="room1">room1</div>
<div id="chat" data-chat-name="room2">room2</div>

这是 jQuery:

<script>
$("#chat").click(function(event){
    document.getElementById("1").contentWindow.sendCommand("JOIN #" + $(this).attr('data-chat-name'));
});
</script>

我遇到的问题是，只有单击第一个 <div> 时它才有效。即 room1，任何其他点击都将被忽略。为什么是这样？即，如果我单击 room2，则不会发生任何事情，但是当我单击 room1 时，它会起作用。

Answer 1

第一个 ID 必须是唯一的..改为使用类..这样您就可以从这里开始

<div class="chat" data-chat-name="room1">room1</div>
<div class="chat" data-chat-name="room2">room2</div>

在js中

<script>
$(".chat").click(function(event){
    alert($(this).attr('data-chat-name'));
    // with data attr you can use  .data() as well
    alert($(this).data('chat-name'));
});
</script>

其他信息如果您有不同的 ID，您可能需要

 <div id="chat1" data-chat-name="room1">room1</div>
 <div id="chat2" data-chat-name="room2">room2</div>

您可以使用选择器$('[id^="chat"]') ..这意味着选择Ids以chat开头的所有元素