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()方法。因此，您不必每次都使用.hasClass()检查课程。

$('.buttons button').click(function(e) {
  //some of your code here

  $('.cards-wrapper').toggleClass('grid list');
});

Answer 2

尝试使用jquery的toggleClass()函数

在您的回答addClass()和removeClass()。正确。
但最好与toggleClass()一起使用。因为切换函数来检查已经存在或不存在的类名。如果存在删除类名，则不添加类。

它的句柄有一个或多个函数。参见jquery文档 toggleClass()

＆＃13;

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

＆＃13;

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

＆＃13;

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<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>

＆＃13;

Answer 3

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

通过检查单击的按钮是否处于活动状态，您可以将if / else逻辑简化为一个if语句。一旦确定按钮未激活，您就可以只切换两个按钮和内容包装器div的类。

＆＃13;

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

＆＃13;

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

＆＃13;

<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>

＆＃13;

如果添加更多按钮，以这种方式使用toggleClass方法会中断，所以要小心。

Answer 4

尝试使用ternary运算符而不是toggleClass()，因为它会导致错误。

＆＃13;

$('.buttons button').click(function(e) {
      e.preventDefault();
      $('button').removeClass('active');
      $(this).addClass('active');
      $(this).hasClass('list') ? $('.cards-wrapper').removeClass('grid').addClass('list') : '';
      $(this).hasClass('grid') ? $('.cards-wrapper').removeClass('list').addClass('grid') : '';
});

＆＃13;

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

＆＃13;

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<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>

＆＃13;

如何防止addClass和removeClass重复

4 个答案: