Question

需要一些帮助。管理创建一个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>

感谢您的关注。

Answer 1

$(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来选择按钮$（这个）就可以了......

Answer 2

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

Answer 3

您可以将类添加到当前单击的元素，并将其从兄弟元素中删除：

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

<强> Working Demo

Answer 4

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

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

根据要求更改class =“active”。

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

4 个答案: