使用jQuery更改HTML类

Raiyu 发表于 Java

赖宇：

我有许多具有相同类名的元素，例如：

<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，然后停止。因此，除了第一个元素外，其他所有元素均无效。另外，当我单击其他元素时，我想将已经处于活动状态的类（“联系活动”）的名称改回为“联系”。

罗里·麦克罗桑（Rory McCrossan）：

你拥有的主要问题是id属性的需要来始终是DOM中是唯一的。如果要使用通用标识符对元素进行分组，请使用class。

然后，您可以按该类选择元素并调用toggleClass()它们。请注意，您也不需要删除/添加contact类。

最后一个问题是一次只能有一个活动班级，因此另一个活动班级应该被取消选择。

在这种情况下，您只需调用removeClass()除.content单击的元素之外的所有元素。试试这个：

$('.content').click(function() {
  $('.content').not(this).removeClass('active');
  $(this).toggleClass('active');
});

.active {
  color: #C00;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<ul>
  <li class="content contact">
    Content...
  </li>
  <li class="content contact active">
    Content...
  </li>
  <li class="content contact">
    Content...
  </li>
  <li class="content contact">
    Content...
  </li>
</ul>

本文收集自互联网，转载请注明来源。

如有侵权，请联系 [email protected] 删除。