Question

我正在尝试模仿社交媒体资料页面。

我有一个HTML页面，它利用循环显示来自4个不同用户的随机消息。页面上显示10个“tweet”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>

这些div中的每一个都有一个ID和一个类名：所有的ID都是相同的，并且是静态的，类名是动态的，随机分配4个名称中的一个：john，mary，david，susan。

一旦页面加载，我希望能够点击这些div中的一个用户名，并让它只显示来自该特定个人的消息。

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

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

showTweets是一个函数，它将随机用户与随机消息进行联接，并将其附加到父div。

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

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>

现在你可以使用课程＆＃34; tweet＆＃34;找到所有容器：

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

如评论中所述，当您在事件处理程序中时，可以使用$（this）来引用已单击的元素。

完整的实施：full example

Answer 2

对于两个或更多不同的元素，您永远不应该具有相同的ID。那是什么课程。使用idS的所有内容都假设您遵循此规则。

您可以使用数据属性

<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');
});

Answer 3

ID是唯一的，因此它们只应出现一次。您可以通过使用数据属性来绕过它。

例如

<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');
});

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

3 个答案: