jQuery/js条件文が実行されない

Question

最初の文は機能しますが、最後の文は機能しません。解決できません。

最初のプレスは最初に隠されたものを表示し、次に2番目のプレスは3番目の隠し物を表示する必要があります。のは、構文エラーを発見遊ぼう（私は本当にめちゃくちゃ場合を除きます。）

$(document).ready(function() { 
    $("#v2i").hide(); 
    $("#v3i").hide(); 
    $("#vAdd").click(function(){ 
     if ($("#v2i").not(":visible")) { 
      $("#v2i").show(); 
     } else if (($("#v2i").is(":visible")) && ($("#v3i").not(":visible"))) { 
      $("#v3i").show(); 
      $(this).hide(); 
     } 
    }); 
}); 

Answer 1

.not()それは要素を選択するために使われて、テストではありません。 notを使用する必要はありません.jQueryには:hiddenセレクタがあり、それは:visibleの反対です。あなたは記述する必要があります。

if ($("#v2i").is(":hidden")) { 
     $("#v2i").show(); 
    } else if (($("#v2i").is(":visible")) && ($("#v3i").is(":hidden"))) { 
     $("#v3i").show(); 
     $(this).hide(); 
    } 

また、すでに最初ifでそれをテストしているので、第二ifで#v2iをチェックする必要はありません。 #v2iが表示されている場合にのみelse ifにアクセスします。だから、それだけで次のようになります。

if ($("#v2i").is(":hidden")) { 
     $("#v2i").show(); 
    } else if ($("#v3i").is(":hidden")) { 
     $("#v3i").show(); 
     $(this).hide(); 
    } 

Answer 2

異なるアプローチ - ではなくif文使うより - クラス名を使用して、その後、隠されたクラスを削除し、要素を表示するためにquerySelectorAllを使用します。

私は要素のダミーバージョンを作成し、すべてのケースでテキストとしてIDを含めたことに注意してください。現実には、隠された要素（最初のv2iとv3i）が連続して表示されるので、if文は必要ありません。むしろ隠れたクラスが各要素に適用されてから、ボタンの（要素を明らかにする）隠しクラスを順次削除し、最後の要素が明らかになったときにvAddボタン自体が非表示になります。

論理があり、このような別のアプローチを使用すると、境界が広がり、新しいアイデアが可能になるということは、常に無駄に削除する方が良いです。はい、私はそこに三項演算子があることを知っていますが、これは簡略なif文ですが、私はまだこのアプローチが好きです。 :)

解決策がすでに受け入れられていることは知っていますが、私は、明示的な結果を達成する新しい方法を試すことを信じています。

$(document).ready(function() { 
 
    $("#vAdd").click(function(){ 
 
    var el = document.querySelectorAll('.hidden'); 
 
    el[0].classList.remove('hidden'); 
 
    el.length == 1 ? $(this).hide() : $(this).show(); 
 
    }); 
 
});

.hidden{display:none}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> 
 
<div id="v2i" class="hidden">v2i</div> 
 
<div id="v3i" class="hidden">v3i</div> 
 
<hr/> 
 
<button id="vAdd">vAdd - click me</button>