いくつかのliがhaveclassの場合、jquery addclass - javascript、jquery、if-statement、addclass

一連のliに特定のクラスが適用されている場合、スパンにクラスを追加しようとしています。

李コンプリート

リ

李コンプリート

リ

李コンプリート

等...

スパン＃完了

「アクティブ」のクラスを追加しようとしましたliの4つにクラス「complete」がある場合のスパン 私は以下を試しましたが、クリックイベントを機能させることができますが、ifステートメントは機能しません。これは可能ですか、それとも効率的ですか？

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

私は、domを使用してli.completeを数え、それに対してaddClassを数える方法を探していましたが、あまりうまくいきませんでした

ありがとう

回答：

回答№1は1

現在のコードには2つの問題はありません。実行中です

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

バインドした直後 click() ボタンが実際にクリックされた後ではなく、ハンドラー。さらに、あなたは数を数えていません li完成したもの。

1つのオプションはこれです。 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");
}
});
});

ただし、項目の選択を解除できるようにしたい場合は、コードが複雑になります。

---

回答№2の場合は0

これを試して：

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

---

回答№3の場合は0

私があなたの質問を正しく理解し、4の場合に要素にクラスを適用したい場合 li 要素にはすべて特定のクラスがあり、これを行うことができます：

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

機能する例を見る ここに.

---

回答№4の場合は0

あなたはすべてを数えることができます li 完全なセレクターがあり、カウントが少なくとも4であるかどうかを確認する要素：

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

---