javascript - 使用 jquery 更改 html 类

Question

我有很多具有相同类名的元素，例如:

<li class="contact" id="content">
 // some content here....
</li>
 .
 .
<li class="contact active" id="content">
 // some content here....
</li>
 .
 .
<li class="contact" id="content">
 // some content here....
</li>
 .
 .
<li class="contact" id="content">
 // some content here....
</li>
 .
 .

所有类都有相同的名称，除了一个写着“contact active”的类。
当用户点击它时，页面中的这个元素将被突出显示。单击此处时，我编写了一个 jquery 脚本来更改类名:

$('#content').click(function() {
$(this).removeClass('contact');
$(this).addClass('contact active');
});

但问题是，它只搜索一个匹配的 id，然后就停止了。所以，除了第一个元素之外，所有其他元素都没有效果。此外，当我单击其他元素时，我还想将已经激活的类(“contact active”)的名称更改回“contact”。

Answer 1

ID 必须是唯一的。您的 ID 选择器仅将点击事件分配给匹配集中的第一个元素。

您需要修改点击事件以具有类选择器而不是 ID 选择器:

 var $contactDiv = $('.contact');
 $contactDiv.click(function() {
  $contactDiv.removeClass('active'); // remove all active
  $(this).addClass('active'); // add it back on this object
 });