JQuery AddClass, если какое-то количество ликовских классов

Question

Я пытаюсь добавить класс в диапазон, если к набору li применен определенный класс.

ли. полная

Li

ли. полная

Li

ли. завершено

и т.д ...

span # done

Я пытался добавить класс «активный» в промежуток, если 4 из li имеют класс «complete» Я попробовал следующее, и я могу заставить событие click работать, но не оператор if, и возможно ли это или эффективно?

$(function(){
$("li").click(function(){
   $(this).addClass("complete");
});
if($("li").hasClass("complete")){
   $("#done").addClass("active");
};
});

Я искал способ, возможно, сосчитать li.complete с dom, а затем добавить класс против него, но не повезло

Спасибо

Answer 1

Ваш текущий код не будет иметь двух проблем: вы запускаете

if($("li").hasClass("complete")){
   $("#done").addClass("active");
};

сразу после привязки обработчика click(), а не после того, как кнопка была фактически нажата.Кроме того, вы не учитываете количество выполненных завершенных операций li.

Один из вариантов - подсчет количества li с завершенным классом при каждой обработке нажатия.:

$(function(){
$("li").click(function(){
   $(this).addClass("complete");

   if ($("li.complete").length >= 4) {
       $("#done").addClass("active");
   }
});
});

Вы также можете держать счетчик на ходу ...

$(function(){
var activeCount = 0;
$("li").click(function(){
   $(this).addClass("complete");

   activeCount = activeCount + 1;

   if (activeCount >= 4) {
       $("#done").addClass("active");
   }
});
});

, но если вы когда-нибудь захотите отменить выбор элементов, это сделает ваш код болеесложнее.

Answer 2

Если я правильно понял ваш вопрос, и вы хотите применить класс к элементу, если все 4 li элемента имеют определенный класс, вы можете сделать это:

if($("li.complete").length == 4) {
    $("#done").addClass("active");
}

См. Пример того, как это работает здесь .

Answer 3

Вы можете сосчитать все элементы li, которые имеют ваш полный селектор, и посмотреть, равно ли это число как минимум 4:

if($("li.complete").size() > 3) {
   $("#done").addClass("active");
}

Answer 4

Попробуйте это:

$(function(){
    $("li").click(function(){
         $(this).addClass("complete");
            if($("li.complete").length >= 4){
                 $("#done").addClass("active");
            };
    });
});