Удалить класс, добавленный после нажатия новой кнопки

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 

    }); 

}); 

Добавленная строка кода удалит класс для остальных кнопок. DEMO: 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'); 
}); 

Изменить класс = "активный" в соответствии с требованием.