使用jQuery选择具有相同类名的div

Question

我试图模仿社交媒体个人资料页面。

我有一个HTML页面，利用循环显示来自4个不同用户的随机消息。页面上显示了10个“推文”div，它们基本相同，除了它们的类名和内容。

以下是一个示例：

<div class="tweet">
  <div id="unique" class="mary">
    <strong>@mary:</strong>
  </div>"the sun is shining today."
</div>
<div class="tweet">
  <div id="unique" class="john">
    <strong>@john:</strong>
  </div>"I just ate an amazing pizza."
</div>

每个

标签都有一个ID和一个类名：ID对于所有标签都相同且是固定的，而类名是动态的并随机分配为以下四个名称之一：john、mary、david、susan。

页面加载后，我希望能够单击其中一个

标签中的用户名，并仅显示来自该特定用户的消息。

这是我正在使用的jQuery代码：

var grabTweets = function(){
  showTweets('', 'all');
  $('#unique').on('click', function() {
    var tweetUser = $('#unique').attr('class');
    showTweets(tweetUser, 'user');
  });      
}

showTweets是一个函数，它将随机的用户和随机的消息连接起来，并将其附加到父div中。

现有的代码只适用于页面上的第一个div，而不是所有的div。我希望它能够适用于页面上所有的用户名div。

- Theo Ryan

---

不能使用相同的值来定义两个id。id="unique"并不是唯一的。 - Praveen Kumar Purushothaman

为什么你的“唯一”ID是固定的且总是相同的，但是你的动态分配名称却是一个类？ - Draco18s no longer trusts SE

我试图让变量tweetUser只被赋予一个类名。当我将unique更改为一个类时，我无法隔离出动态的类名。 - Theo Ryan

Answer 1

生成以下HTML代码：

<div class="tweet">
  <div id="unique-1" class="mike">
    <strong>@mary:</strong>
  </div>"the sun is shining today."
</div>
<div class="tweet">
  <div id="unique-2" class="mike">
    <strong>@john:</strong>
  </div>"I just ate an amazing pizza."
</div>

现在你可以使用"class = tweet"来查找所有容器：

  $('.tweet').on('click', function() {
    /* here some code to find the child of the container */
    /* Use $(this) to reference the current container */
  });

如评论中所述，在事件处理程序中，您可以使用$(this)引用已被点击的元素。

完整实现：完整示例

- Marco Altieri

Answer 2

每个ID都是唯一的，因此它们应该只出现一次。您可以通过使用data-attributes来绕过此限制。

例如：

<div class="tweet">
  <div data-sharedName="unique" class="mike">
    <strong>@mary:</strong>
  </div>"the sun is shining today."
</div>
<div class="tweet">
  <div data-sharedName="unique" class="mike">
    <strong>@john:</strong>
  </div>"I just ate an amazing pizza."
</div>

那么您的Javascript必须是这样的：

$('[data-sharedName]').on('click', function() {
  var tweetUser = $(this).attr('class');
  showTweets(tweetUser, 'user');
}); 

- Fabian N.

Answer 3

您不应该为两个或更多不同的元素使用相同的id。这就是类的作用。假设您遵循此规则，所有使用id的内容都应如此。

您可以使用数据属性

<div class="tweet">
  <div data-uid="mike" class="tweet">
    <strong>@mary:</strong>
  </div>"the sun is shining today."
</div>

$('.tweet').on('click', function() {
  var tweetUser = $(this).data('uid');
  showTweets(tweetUser, 'user');
}); 

- user1695032