ループから実行するときに.hide（）が関数エラーではない

Question

ラジオボタンがチェックされているかどうかに基づいて、いくつかの異なるラベルをループして内容を非表示にしたいと考えています。これは私が思いついた解決策ですが、私はコンソールでエラーが発生し続けます。

var hazardOptions = $(".js-hazardous-option"); 
var hazard = $("input[name=Hazardous]"); 
for (var i = 0, len = hazard.length; i < len; i++) { 
    if (hazard[i].id === "HazardousYes" && hazard[i].checked) { 
     for (var ii = 0, length = hazardOptions.length; ii < length; ii++) { 
      hazardOptions[ii].show(); 
     } 
    } else if (hazard[i].id === "HazardousNo" && hazard[i].checked) { 
     for (var iii = 0, leng = hazardOptions.length; iii < leng; iii++) { 
      hazardOptions[iii].hide(); 
     } 
    } 
} 

私が手にエラーがある：

非表示は（）関数ではありません

わからない、私はのためにオンライン外観を持つ試みたものを私が欠けています同様の問題だが運がない。私はかなり問題がここにあることを確信しています：hazardOptions[iii].hide();しかし、本当になぜ、そして/またはそれをどのように修正するかはわかりません。

Answer 1

でそれをラップする必要がありますJQueryオブジェクト。確かに混乱しますが、it is in the documentationです。あなたが効果的に行うために必要なもの

はバックjQueryオブジェクトにそれを回すです：

：

$(hazardOptions[iii]).hide(); 

それとも、とeq() functionを使用することができますはjQueryオブジェクトの広告は、このようにまだhide()機能を持って提供しません

hazardOptions.eq(iii).hide(); 

Answer 2

は、おそらくあなたは、インデックスを経由してそれらにアクセスしようとした場合、あなたが実際にバックではなくDOM要素を取得し、jQueryのセレクタからのオブジェクトのリストを持っている場合$

$(hazardOptions[ii]).hide() 

Answer 3

あなたが現在持っている通り、hazard.id === "HazardousYes"なら、あなたはすべてのhazardOptionsを表示していて、それが"HazardousNo"なら、あなたはすべてを隠しています。

あなたはjQueryのコレクションに.show()と.hide()を呼び出すことができ、それがコレクションですべての要素にそれを適用します。以下のコードは、元のコードのロジックを再現しますが、hazardOptionsの最終的な表示/非表示状態は、チェックされた最後のハザードによってのみ決定され、IDは「HazardousYes」および「HazardousNo」に等しくなります。これはあなたが望むものかもしれませんが、私はそうではないと思います。

var hazardOptions = $(".js-hazardous-option"); 
 
var hazards = $("input[name=Hazardous]"); 
 
hazards.each(function (index, hazard) { 
 
    if (hazard.checked) { 
 
    if (hazard.id === "HazardousYes") { 
 
     hazardOptions.show(); 
 
    } else if (hazard.id === "HazardousNo") { 
 
     hazardOptions.hide(); 
 
    } 
 
    } 
 
}

編集 - あなたは、重複IDを持つ要素を持っていない場合、あなたはこれは本当に簡単にすることができ、考えてみれば：

hazardOptions.show($("#HazardousYes").is(":checked")); 
hazardOptions.hide($("#HazardousNo").is(":checked"));