javascript - 如何防止addClass和removeClass重复

Question

我正在向按钮添加事件类，并且我还根据单击的按钮向卡片包装器添加列表/网格类。下面是工作代码。有没有办法编写更少的代码来实现相同的输出？

$('.buttons button').click(function(e) {
      e.preventDefault();
      $('button').removeClass('active');
      $(this).addClass('active');

    if ($(this).hasClass('list')) {
        $('.cards-wrapper').removeClass('grid').addClass('list');
    }
    else if($(this).hasClass('grid')) {
        $('.cards-wrapper').removeClass('list').addClass('grid');
    }
});

<div class="buttons">
  <button class="grid">Grid</button>
  <button class="list active">List</button>
</div>

<div class="cards-wrapper list">
  <div>Sample Content</div>
</div>

Answer 1

您可以使用 jQuery toggleClass method 。顾名思义，此方法会切换选择中所有元素的给定类。

通过检查所单击的按钮是否处于非事件状态，您可以将 if/else 逻辑减少为只有一个 if 语句。一旦确定该按钮未处于事件状态，您就可以切换这两个按钮和内容包装器 div 的类。

$('.buttons button').click(function(e) {
    e.preventDefault();
    if (!$(this).hasClass('active')) {
        $('button').toggleClass('active');
        $('.cards-wrapper').toggleClass('grid list');
    }
});

.active {
  color: green;
}
.list {
  color: red;
}
.grid {
  color: blue;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="buttons">
  <button>Grid</button>
  <button class="active">List</button>
</div>

<div class="cards-wrapper list">
  <div>Sample Content</div>
</div>

但是，如果添加更多按钮，以这种方式使用 toggleClass 方法将会中断，因此请小心。