Question

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

这是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时才有效，任何其他点击都会被忽略。为什么是这样？即如果我点击房间2，没有任何反应，但是当我点击房间1时，它会起作用。

Answer 1

第一个Ids必须是唯一的...使用类而不是..所以你可以从这里开始

<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以聊天开头的所有元素

Answer 2

根据您的评论

开头

我不想要不同的ID，不需要......

似乎你误解了ID是什么。

ID是一个唯一标识符，仅用于一个元素和一个元素，此处您别无选择。只要你有相同的 ID，JS就会一直失败，所以我会听听评论者的意见，他们知道他们在这里做了什么。

我建议您使用ID代替

，而不是使用class

class可以根据需要在尽可能多的元素上进行，因此您可以将相同的元素用于400多个元素。

您的选择器将变为$('.chat').click(...snipped...);

使用HTML：

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

没有更多的东西了。当他们创建这个系统时，人们会决定在一个元素上使用ID而在多个元素上使用class甚至一个类也可以在一个元素上完美地工作，如果你认为你可以改变你的天真 - 没有任何进攻，但我觉得在看到你在本文顶部发表引用的陈述后，我必须睁开眼睛。

祝你好运，它将解决你的问题并让你成为更好的开发者，因为你将正确技术用于正确的原因>正确的地方。

Answer 3

id元素应该是唯一的。因此它返回第一个id。你应该使用class而不是id。

Answer 4

ID必须是唯一的。改为使用类。

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

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="chat" data-chat-name="room1">room1</div>
<div class="chat" data-chat-name="room2">room2</div>

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

4 个答案: