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

Question

需要一些帮助。设法创建一个 jQuery 来在单击后更改按钮的类，但我需要您单击一个从其他按钮中删除的新按钮类。

我正在努力，但我做不到。我已经尝试了一些方法，但每当我尝试时，我都可以删除所有内容并单击新类(class)中不包含的按钮。

有人可以帮助我吗？

$(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 来选择按钮 $(this) 就可以了...