jquery - Jquery：フィルター関数

Question

フィルタ関数を使用してクラスのリストを調べます。ドロップダウンが空の場合、エラースタイルが追加されます。

問題。 条件が満たされた場合、つまりすべてのドロップダウンに選択された値が含まれている場合、他のdivIDを非表示にして表示したい

これは、空のドロップダウンにスタイルを追加するための私のコードです

 $(".dropdown_select").filter(function(){
 return $(this).val() == "";
 }).css("border-color", "#FF0000");

しかし、他の2つのdiv IDを非表示にして表示するにはどうすればよいですか？つまり、すべてのドロップダウンが入力されている場合にのみ、

$(".step-2").fadeIn("slow");
$(".step-1").fadeOut("slow");

Answer 1

var $children = $(".dropdown_select").children();

if($children.length === $children.filter(".dropdown_select").length) {
   $(".step-2").fadeIn("slow");
   $(".step-1").fadeOut("slow");
}

Answer 2

スタイリングには、 andtoggleClass()の代わりに関数の引数を使用することをお勧めします：filter()css()

$(document).on("change", ".dropdown_select", function () {
  var $emptyOnes = $(".dropdown_select")
                   .filter(function () { return this.value == ""; });

  if ($emptyOnes.length == 0) {
    $(".step-1").fadeOut("slow");
    $(".step-2").fadeIn("slow");
  } 

  $(this).toggleClass("empty", this.value == "");
});

ここで、CSS定義は次のようになります。

.empty {
  border-color: #FF0000;
}