jquery addclass 如果某些数量的 li 有类

Question

如果一组 li 应用了特定的类，我正在尝试向跨度添加一个类。

李.完整的

丽丽

。完整的

丽丽

。完整

等...

span #完成

如果 4 个 li 具有“完整”类，则我尝试向跨度添加“活动”类 我已经尝试了以下操作，我可以让 click 事件起作用，但不能让 if 语句起作用，这是否可能或有效？

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

我一直在寻找一种方法来计算 li.complete 在 dom 中的数量，然后针对它添加 Class，但运气不佳，

谢谢

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

试试这个：

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

Answer 3

如果我正确理解了您的问题，并且您想要将一个类应用于一个元素（如果 4 个 li 元素都具有特定的类），您可以执行以下操作：

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

查看其工作示例 这里。

Answer 4

您可以计算具有完整选择器的所有 li 元素，并查看计数是否至少为 4：

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