Когда у детей активный класс, текстовый фильтр будет выделен жирным шрифтом
При нажатии на ссылку тега к этому конкретному тегу будет добавлен .active. Я хочу, чтобы, когда в теге присутствует .active, буква p станет синей (к p добавляется .active).
Мне удалось превратить букву «p» в синюю. Однако у меня возникли проблемы с удалением синего цвета и .active, когда ссылка на тег не активна.
$('.tag').click(function() {
var clicks = $(this).data('clicks');
if (clicks) {
$(this).addClass('active');
} else {
$(this).removeClass('active');
}
$(this).data("clicks", !clicks);
});
$('.tag').click(function() {
var numActive = $('.active').length
if (numActive > 0) {
$(this).closest('.wrap').find('.filter').addClass('active');
} else {
$(this).closest('.wrap').find('.filter').removeClass('active');
}
}).tag.active {
color: red;
}
.filter.active {
color: blue;
}<script src = "https://cdnjs.cloudflare.com/ajax/libs/jquery/3.7.1/jquery.min.js"></script>
<div class = "wrap">
<p class = "filter">filter</p>
<div class = "tag-wrap">
<a class = "tag">tag 1</a>
<a class = "tag">tag 2</a>
<a class = "tag">tag 3</a>
</div>
</div>
![Безумие обратных вызовов в javascript [JS]](https://i.imgur.com/WsjO6zJb.png)
Ответы 2
Вы можете объединить логику в один обработчик кликов и упростить его, используя toggleClass:
$('.tag').click(function() {
$(this).toggleClass('active');
updateFilter();
});
function updateFilter() {
$('.filter').toggleClass('active', $('.tag.active').length > 0);
}.tag.active {
color: red;
}
.filter.active {
color: blue;
}<script src = "https://cdnjs.cloudflare.com/ajax/libs/jquery/3.7.1/jquery.min.js"></script>
<div class = "wrap">
<p class = "filter">filter</p>
<div class = "tag-wrap">
<a class = "tag">tag 1</a>
<a class = "tag">tag 2</a>
<a class = "tag">tag 3</a>
</div>
</div>Спасибо @Invulner, но переключатель не работает, если я нажимаю, чтобы выделить каждую вторую ссылку. Он снова станет черным, когда я нажму ссылку на второй тег, и снова подсветится, когда щелкну ссылку на третий тег.
@ feliel93 Я не понял. Запустите мой фрагмент кода — щелкните любую ссылку, чтобы фильтр оставался активным, пока какая-либо ссылка имеет активный класс. Активный класс из фильтра будет удален только в том случае, если ни одна ссылка не имеет активного класса.
Вы также можете попробовать это
$('.tag').click(function() {
$(this).toggleClass('active');
$('.filter').toggleClass('active', $('.tag').hasClass('active'));
});
Спасибо @naushad, но переключатель не работает, если я нажимаю, чтобы выделить каждую вторую ссылку. Он снова станет черным, когда я нажму ссылку на второй тег, и снова подсветится, когда щелкну ссылку на третий тег.
также измените этот CSS, чтобы сделать текст фильтра жирным: .filter.active {color: blue; шрифт-вес: жирный;}