Question

我想在两个锚标签上的两个类之间切换。当我点击非粗体链接时，我希望它变为粗体，然后另一个变为正常。但是，我真的不知道如何去做。

我尝试过几种方法：

＆＃13;

$(".link").click(function(e) {
    e.preventDefault();
      if ($(this).hasClass("selected")) {
        $(this).removeClass("selected");
      } else {
        $(this).addClass("selected");
      }
  });

＆＃13;

.selected {
  font-weight: bold;
}

＆＃13;

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.0.1/jquery.min.js"></script>
<div class="two-links">
  <span>Filter By:</span>
  <a class="link selected" href="#">Link1</a>
  <a class="link" href="#">Link2<a>
</div>

＆＃13;

在这里，我根据目标添加和删除并检查该类是否存在但是它没有处理其他未单击的锚 - 我需要单击它以在需要自动发生时删除粗体

然后我惹恼了toggleClass()：

＆＃13;

 $(".link").click(function(e) {
    $(this).toggleClass("selected");
 });

＆＃13;

.selected {
  font-weight: bold;
}

＆＃13;

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.0.1/jquery.min.js"></script>
    <div class="two-links">
      <span>Filter By:</span>
      <a class="link selected" href="#">Link1</a>
      <a class="link" href="#">Link2</a>
    </div>

＆＃13;

这绝对是一步之遥，但我不了解如何与toggleClass()和多个元素建立关系。

我是以正确的方式来做这件事还是有更好的事情？

Answer 1

这个怎么样？您可以使用siblings()方法。

$(".link").click(function(e) {
    $(this).toggleClass("selected");
    $(this).siblings('a').toggleClass('selected');
});

.selected {
  font-weight: bold;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.0.1/jquery.min.js"></script>
<div class="two-links">
  <span>Filter By:</span>
  <a class="link selected" href="#">Link1</a>
  <a class="link" href="#">Link2</a>
</div>

Answer 2

接受的答案是正确答案，但应该添加一些内容：

$(".link").click(function(e) {
    var isSelected = $(this).hasClass("selected");
    e.preventDefault();
    if (!isSelected) {
      $(this).toggleClass("selected");
      $(this).siblings('a').toggleClass('selected');
    }
});

基本上，只有在您点击的内容不是所选元素时才执行切换操作。

Answer 3

更简单的解决方案

$(".link").click(function(e) {
    e.preventDefault();
    $(".link").removeClass("selected");
    $(this).addClass("selected");
});

从所有.link中删除所选的类，然后将其添加到单击的元素中。这将适用于2个以上的链接，而且更简单。无需检查所选课程或获得兄弟姐妹。

切换两个不同元素之间的类

3 个答案: