javascript - 如何在单击元素时切换类，但使用 JQuery 从所有其他元素中删除相同的类？

Question

我正在尽我最大的努力来正确地表达这一点，所以请多多包涵。所以我试图只在被点击的元素上切换一个类(事件)。如果单击另一个元素，我想将“事件”类添加到单击的元素，并从任何其他元素中删除事件类。

问题是当我点击一个元素时添加了“active”类但是当我点击另一个元素时“active”类没有从其他元素中移除

           $("li.test a").click(function() {
                $(this).toggleClass("active");

            });

            $("li.test a").click(function() {
                $(this).toggleClass("active");
            });


            $("li.test a").click(function() {
                $(this).toggleClass("active");

            });

HTML

<li class="test1">
 <a href="#" class="">
</li>

<li class="test1">
 <a href="#" class="">
</li>

<li class="test1">
 <a href="#" class="">
</li>

<li class="test2">
 <a href="#" class="">
</li>

<li class="test2">
 <a href="#" class="">
</li>

<li class="test2">
 <a href="#" class="">
</li>

Answer 1

这是工作代码:

$("li.test a").on("click",function() {
  if($(this).hasClass("active")){
    $(this).removeClass("active");
  } else{
    $("a.active").removeClass("active");
    $(this).addClass("active");
  }
});

.active{
  color: red;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js"></script>
<li class="test">
 <a href="#" class="">test</a>
</li>

<li class="test">
 <a href="#" class="">test</a>
</li>

<li class="test">
 <a href="#" class="">test</a>
</li>

<li class="test">
 <a href="#" class="">test</a>
</li>

<li class="test">
 <a href="#" class="">test</a>
</li>

<li class="test">
 <a href="#" class="">test</a>
</li>

(Working pen)

请注意，您在 HTML 中有类“test1”和“test2”，但在 JS 中有类“test”!