删除单击“新建”按钮后添加的类

Remove class added after clicking new button

本文关键字：添加 按钮 单击 新建 删除      更新时间：2023-09-26

需要一些帮助。设法创建了一个jQuery来更改被点击后的按钮类，但我需要你点击一个新的按钮类。

我在努力，但做不到。我已经尝试过一些方法，但无论何时尝试，我都可以删除所有内容，并单击新类中不包含的按钮。

有人能帮我吗？

$(document).ready(function() {
  $('div#filters-container button').click(function() {
    var id_button = $(this).val();
    $("#" + id_button + "").addClass("cbp-filter-item-active");
  });
});
.cbp-filter-item-active {
  background-color: #5d5d5d;
  color: #fff!important;
  border-color: #5d5d5d
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<div id="filters-container">
  <button value="0" id="0" href="videos2-carrega.asp">Todos</button>
  <button value="1" id="1" href="videos2-carrega.asp?cat=1">Família</button>
  <button value="2" id="2" href="videos2-carrega.asp?cat=2">Finanças</button>
  <button value="3" id="3" href="videos2-carrega.asp?cat=3">Propaganda</button>
  <button value="4" id="4" href="videos2-carrega.asp?cat=4">Empreendedorismo</button>
</div>

感谢您的关注。

$(document).ready(function() {
    $('div#filters-container button').click(function() {
        var id_button = $(this).val();
        $("#"+id_button+"").addClass("cbp-filter-item-active");
        $(this).siblings().removeClass('cbp-filter-item-active'); //added line
    });
});

添加的代码行将删除其余按钮的类。演示：http://jsfiddle.net/8oytw0ue/2/

实际上，简单得多：

$(document).ready(function() {
    $('div#filters-container button').click(function() {
    $(this).addClass("cbp-filter-item-active");
        $(this).siblings().removeClass('cbp-filter-item-active');
    });
});

你不需要ID来选择按钮$（这个）就可以了…

$(document).ready(function() {
  var $buttons = $('div#filters-container button').click(function() {
    var $this = $(this).addClass("cbp-filter-item-active");
    $buttons.not($this).removeClass("cbp-filter-item-active");
  });
});
.cbp-filter-item-active {
  background-color: #5d5d5d;
  color: #fff!important;
  border-color: #5d5d5d
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<div id="filters-container">
  <button value="0" id="0" href="videos2-carrega.asp">Todos</button>
  <button value="1" id="1" href="videos2-carrega.asp?cat=1">Família</button>
  <button value="2" id="2" href="videos2-carrega.asp?cat=2">Finanças</button>
  <button value="3" id="3" href="videos2-carrega.asp?cat=3">Propaganda</button>
  <button value="4" id="4" href="videos2-carrega.asp?cat=4">Empreendedorismo</button>
</div>

您可以将类添加到当前单击的元素，并从同级元素中删除它们：

$('div#filters-container button').click(function() {
    $(this).addClass("cbp-filter-item-active").siblings().removeClass('cbp-filter-item-active');
});

工作演示

您可以使用这个：http://jsfiddle.net/620tqr19/

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

根据要求更改class="active"。

相关文章：