raselgit
@raselgit
Веб-дизайнер

Как активировать toggleClass ограниченное количество раз?

На этой странице есть список тегов, у которых добавляется класс при клике и они изменяют цвет.

Но как сделать так, чтобы могло активироваться не больше 5-ти тегов и если количество активных тегов 5, то все остальные теги (не выделенные) становились серыми?

В данный момент там стоит такой код:
$(function() {
	$('.interests__item').click(function(){
		$(this).toggleClass('interests__item_active');
	});

	$('.interests__button').click(function(){
		$('.interests__item').addClass('interests__item_confirmed');
	});
});
  • Вопрос задан
  • 134 просмотра
Решения вопроса 2
AlexMaxTM
@AlexMaxTM
$('.interests__item').click(function(){
        if ( $('.interests__item_active').length < 5 )
            $(this).toggleClass('interests__item_active');
});
Ответ написан
raselgit
@raselgit Автор вопроса
Веб-дизайнер
$(function() {
	$('.interests__item').click(function(){
		if ( $('.interests__item_active').length < 5 )
			$(this).toggleClass('interests__item_active');
		else if ($(this).hasClass('interests__item_active'))
			$(this).toggleClass('interests__item_active');
	});

	$('.interests__item').click(function(){
		if ( $('.interests__item_active').length >= 5 )
			$('.interests__item').addClass('interests__item_confirmed');
		else {
			$('.interests__item').removeClass('interests__item_confirmed');
		}
	});
});
Ответ написан
Комментировать
Пригласить эксперта
Ответы на вопрос 1
ThunderCat
@ThunderCat Куратор тега JavaScript
{PHP, MySql, HTML, JS, CSS} developer
if($('.interests__item_active').length  >= 5) {$('.interests__item').attr("disabled", true);}
Ответ написан
Комментировать
Ваш ответ на вопрос

Войдите, чтобы написать ответ

Войти через центр авторизации
Похожие вопросы