#javascript #jquery
#javascript #jquery
Вопрос:
Почему, когда я использую операторы if / else, я получаю неожиданное поведение кнопки filters Я имею в виду, что значение состояния атрибута class присваивается нескольким кнопкам, а не только одной. Когда я использую два оператора if, я получаю необходимое поведение кнопок
//declate states-filters
var $all = $("#all"); //find all items
var $active = $('#active'); //find active items
var $completed = $("#completed"); //find completeditems
//filter-all
$all.on('click', function(){
if($all.is('[class!="active"]')){ //check the element have the active value of the class
if($completed.has('[class="active"]')){
$completed.removeClass('active'); $all.addClass('active')
}
if($active.has('[class="active"]')){
$active.removeClass('active'); $all.addClass('active')
}
}
})
//filter-active
$active.on('click', function(){
if($active.is('[class!="active"]')){ //check the element have the active value of the class
if ($all.has('[class="active"]')) {
$all.removeClass('active'); $active.addClass('active');
} if ($completed.has('[class="active"]')){
$completed.removeClass('active'); $active.addClass('active')
}
}
})
//filter-complete
$completed.on('click', function(){
if($completed.is('[class!="active"]')){ //check the element have the active value of the class
if ($all.has('[class="active"]')) {
$all.removeClass('active'); $completed.addClass('active');
} if ($active.has('[class="active"]')){
$active.removeClass('active'); $completed.addClass('active')
}
}
})
<div class="states-filter">
<p class="state active" id="all"> All </p>
<p class="state" id="active"> Active </p>
<p class="state" id="completed"> Completed </p>
</div>
Комментарии:
1. Вы путаете has() с hasClass() и используете для этого неправильный синтаксис
Ответ №1:
Вам не нужно использовать событие щелчка для всего p
тега.Поскольку все p
теги имеют один и тот же класс, то есть: state
вы можете использовать это как селектор.Затем, всякий раз, когда какое-либо состояние нажимается, добавьте active
класс к этому элементу и удалите активный класс из других элементов, используя .not(this)
и removeClass()
Демонстрационный код :
var $all = $("p.state");
$all.on('click', function() {
//p tag which is clicked add active class to that
$(this).addClass("active");
//find p tag (not the one which is clicked remove active class from there)
$(this).closest(".states-filter").find("p").not(this).removeClass("active")
})
.active {
color: red
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div class="states-filter">
<p class="state active" id="all"> All </p>
<p class="state" id="active"> Active </p>
<p class="state" id="completed"> Completed </p>
</div>