我正在尝试模仿社交媒体个人资料页面之类的内容。
我有一个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中的每个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。
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');
});
本文收集自互联网，转载请注明来源。
如有侵权，请联系[email protected] 删除。
我来说两句