Question

如果按钮具有活动的班级，则如果我再次单击它，则不应切换。在这里，我有两个按钮“网格视图” 和“列表视图” ，我想在“网格视图” 处于活动状态时仍然单击这不应切换活动班级。

$('.switch-btn').click(function(e){
  $('.switch-btn.grid, .switch-btn.list').toggleClass('active');
});

button.switch-btn {
    border: none;
    outline: none;
    padding: 10px 20px;
    cursor: pointer;
}
button.switch-btn.active {
    background: green;
    color: #FFFFFF;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<button class="switch-btn grid active">Grid View</button>
<button class="switch-btn list">List View</button>

Answer 1

只需为类的存在添加检查器，如下所示：

$('.switch-btn').click(function(e){
  const cButton = $(e.currentTarget);
  
  if (cButton.hasClass('active'))
    return;
    
  $('.switch-btn.grid, .switch-btn.list').toggleClass('active');
});

button.switch-btn {
    border: none;
    outline: none;
    padding: 10px 20px;
    cursor: pointer;
}
button.switch-btn.active {
  background: green;
  color: #FFFFFF;
}

<script src="https://code.jquery.com/jquery-1.12.4.min.js"></script>

<button class="switch-btn grid active">Grid View</button>
<button class="switch-btn list">List View</button>

Answer 2

更改此

$('.switch-btn.grid, .switch-btn.list').toggleClass('active');

对此：

$(".switch-btn").removeClass('active');
$(this).addClass('active');

在您的情况下，即使元素已经具有类active，也始终切换类。但是，我们可以说这些按钮都不具有类active。然后，您的函数会将类active添加到两个元素中。

（您的版本中没有元素为active的元素）

$('.switch-btn').click(function(e){
  $('.switch-btn.grid, .switch-btn.list').toggleClass('active');
});

button.switch-btn {
    border: none;
    outline: none;
    padding: 10px 20px;
    cursor: pointer;
}
button.switch-btn.active {
    background: green;
    color: #FFFFFF;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<button class="switch-btn grid">Grid View</button>
<button class="switch-btn list">List View</button>

在我的解决方案中，您首先从具有类active的所有元素中删除switch-btn类，然后将其添加到单击的元素中。

$('.switch-btn').click(function(e){
  $(".switch-btn").removeClass('active');
  $(this).addClass('active');
});

button.switch-btn {
    border: none;
    outline: none;
    padding: 10px 20px;
    cursor: pointer;
}
button.switch-btn.active {
    background: green;
    color: #FFFFFF;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<button class="switch-btn grid">Grid View</button>
<button class="switch-btn list">List View</button>

Answer 3

检查$(this)是否具有类'active'

$('.switch-btn').click(function(e){
  if ($(this).hasClass('active')) {
    $('.switch-btn.grid, .switch-btn.list').toggleClass('active');
  }
});

button.switch-btn {
    border: none;
    outline: none;
    padding: 10px 20px;
    cursor: pointer;
}
button.switch-btn.active {
    background: green;
    color: #FFFFFF;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<button class="switch-btn grid active">Grid View</button>
<button class="switch-btn list">List View</button>

切换类不应再次单击

3 个答案: