Question

我已经建立了一个CSS按钮库，现在我正在构建一个扩展（我更喜欢小模块，而不是很多大文件）。按钮的基类是.btns-button，然后应用更多类来进一步给它们设置样式。

我有一个.btns-active类，我想在点击时应用。我无法通过ID进行定位，因为这是一个旨在用于任何项目的库。

我正在构建一个演示页面并尝试将.btns-active应用于单击的按钮，同时将其从已应用.btns-active的任何其他按钮中删除。

.btns-button {
  cursor: pointer;
  border: none;
  background-color: #cccccc;
  font-family: "Open Sans", sans-serif;
  color: #fff;
  font-weight: bold;
  margin: 10px;
  padding: 10px;
  font-size: 1.25em;
  transition: 0.5s;
}

<button class='btns-button btns-red-bottom btns-active' href='#'>Click Me</button>
<button class='btns-button btns-blue-bottom'>Click Me</button>
<button class='btns-button btns-green-bottom'>Click Me</button>
<button class='btns-button btns-orange-bottom'>Click Me</button>
<button class='btns-button btns-purple-bottom'>Click Me</button>

这是在CSS文件中（使用SCSS生成）。彩色底部，基本上只是为按钮和选择颜色添加了4px底部边框。

.active-btns制作一个白色BG和黑色文本，设置为重要 - 当我将它应用到第一个按钮进行测试时，它工作正常。当单击其中一个按钮时，我希望.btns-active从任何设置的按钮中清除，并仅应用于已单击的按钮。我尝试了很多JQuery方法 - 我花了一些时间在这里搜索，没有一个解决方案对我有用，这是一次尝试（不起作用）：

$('.btns-button').on("click", function (){
    $('.btns-button').removeClass('btns-active');
    $(this).addClass('btns-active');
});

Answer 1

然后清除所有按钮然后应用于相应的

$('.btns-button').on("click", function (){
$('.btns-active').removeClass('btns-active');
$(this).addClass('btns-active');
});

Answer 2

尝试缓存参考

var $buttons = $('.btns-button');

$buttons.on('click', function () {

  $buttons.removeClass('btns-active');

  $(this).addClass('active');

});

示例：jsbin

Answer 3

你可以使用.siblings(.class)引用旁边有相同类的所有控件，对于这种情况，它应该总是只找到1个按钮，我们从该按钮中删除该类

.siblings()

给定一个表示一组DOM元素的jQuery对象，.siblings（）方法允许我们在DOM树中搜索这些元素的兄弟，并从匹配元素构造一个新的jQuery对象。

该方法可选地接受我们可以传递给$（）函数的相同类型的选择器表达式。如果提供了选择器，则会通过测试元素是否与之匹配来过滤元素。

＆＃13;

$('.btns-button').on("click", function() {
  $(this).addClass('btns-active') //add class to clicked button
         .siblings(".btns-active") //look for any other button at the same level
         .removeClass('btns-active'); //remove the class from the found button
});

＆＃13;

.btns-button {
  cursor: pointer;
  border: none;
  background-color: #cccccc;
  font-family: "Open Sans", sans-serif;
  color: #fff;
  font-weight: bold;
  margin: 10px;
  padding: 10px;
  font-size: 1.25em;
  transition: 0.5s;
}

.btns-active {
  background-color: #fff;
  color: #000;
}

＆＃13;

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<button class='btns-button btns-red-bottom btns-active' href='#'>Click Me</button>
<button class='btns-button btns-blue-bottom'>Click Me</button>
<button class='btns-button btns-green-bottom'>Click Me</button>
<button class='btns-button btns-orange-bottom'>Click Me</button>
<button class='btns-button btns-purple-bottom'>Click Me</button>

＆＃13;

Answer 4

首先：在加载evrything之后，确保执行代码。

window.addEventListener('load', ()=>{
  $('.btns-button').on("click", function (){
      $('.btns-button').removeClass('btns-active');
      $(this).addClass('btns-active');
  });
})

.btns-button {
  cursor: pointer;
  border: none;
  background-color: #cccccc;
  font-family: "Open Sans", sans-serif;
  color: #fff;
  font-weight: bold;
  margin: 10px;
  padding: 10px;
  font-size: 1.25em;
  transition: 0.5s; }
  
  
  .btns-active {
  background-color: #cc0000;
  }

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<button class='btns-button btns-red-bottom btns-active' href='#'>Click Me</button>
<button class='btns-button btns-blue-bottom'>Click Me</button>
<button class='btns-button btns-green-bottom'>Click Me</button>
<button class='btns-button btns-orange-bottom'>Click Me</button>
<button class='btns-button btns-purple-bottom'>Click Me</button>

单击JQuery - 选择具有相同类的所有项并从中删除所有类并添加到单击的项（活动效果）

4 个答案: