jQuery Toggle Hide / Show

jQuery ライブラリは、コードの山の使用を最小限に抑え、より少ないコード行でソリューションを支援します。

jQuery バージョン 1.8 までは、toggle() メソッドが広く使用されていましたが、バージョン 1.8 では非推奨になりました。バージョン 1.9 では、個別のトークンで削除されました。

この例では、toggle() 関数がどのように機能するのか、そしてなぜそれが後で推奨されなかったのかについて説明します。トグル動作の解決策を認識する別の方法は、show() および hide() メソッドを使用することです。

この点で、条件付きステートメントを検討するので、1つのボタンを使用してトグルタスクを実行できます。より良い視覚化のためにインスタンスを掘り下げてみましょう。

jQuery の toggle() メソッドを使用して、非表示/表示を切り替えます

toggle() メソッドのユースケースでは、通常、クリックイベントによってトリガーします。この場合も、メソッドの実装には、preventDefault() とともに別の click イベントがあります。

したがって、ダブルクリックイベントを無効にし、正しく機能するはずです。ただし、この方法は単純すぎて、イベントが 2 回以上呼び出されると、問題が発生することがよくあります。

したがって、このあいまいな特性を取り除くために、後でメソッドが削除されました。それでも、明示的に使用されていると見なされており、他の方法よりも少ないコード行で使用できます。

関数のデモンストレーションのコードを見てみましょう。

コードスニペット：

<script src="https://code.jquery.com/jquery-3.6.0.min.js" integrity="sha256-/xUj+3OJU5yExlq6GSYGSHk7tPXikynS7ogEvDej/m4=" crossorigin="anonymous"></script>
<script>
$(document).ready(function(){
  $("#ele1").click(function(){
    $("#ele2").toggle(1500);
  });
});
</script>
</head>
<body>
<p id='ele2'>Content to be toggled.</p>
<button id='ele1'>Show / Hide</button>

出力：

hide() メソッドと show() メソッドを使用して、非表示/表示を切り替えます

ここでは、click イベントのインスタンスから開始し、後でボタンがクリックされたときにコンテンツが表示されるかどうかを確認するための条件ステートメントを生成します。それが真実の場合につながる場合は、hide() に設定します。それ以外の場合は、show() に設定します。

コードブロックを確認して、プロセスを調べてみましょう。

コードスニペット：

<script src="https://code.jquery.com/jquery-3.6.0.min.js" integrity="sha256-/xUj+3OJU5yExlq6GSYGSHk7tPXikynS7ogEvDej/m4=" crossorigin="anonymous"></script>
<script>
$(document).ready(function(){
  $("#ele1").click(function(){
    var x = $('#ele2');
    if(x.is(':visible')){
      x.hide("slide");
    }
    else{
      x.show("slide");
    }

  });
});
</script>
</head>
<body>
<p id='ele2'>Content to be toggled.</p>
<button id='ele1'>Show / Hide</button>

出力：