ホームページ > ウェブフロントエンド > jsチュートリアル > jquery .toggle()をライブまたはバインドして使用します

jquery .toggle()をライブまたはバインドして使用します

William Shakespeare
リリース: 2025-03-03 00:13:17
オリジナル
690 人が閲覧しました

Use jQuery .Toggle() with Live or Bind

jquery .toggle()をライブまたはバインドして使用します

一言で言えば、ライブとトグルを使用することはできますが、ベストプラクティスをコーディングするにはすべきではありません。 jquery .live()とjquery .toggle()の両方が、自動的に独自のバインドイベントを要素に作成します。これにより、トグルを動作させるためにボタンを2回クリックする必要があるため、一緒に使用すると問題が発生します。 これを回避する方法は、Inside Toggleイベントを備えたライブ(「クリック」)イベントを使用することです。このような関数呼び出しの最後に.trigger(「click」)コマンドを追加できます。
<span>// Add sort functions on dynamic elements inserted into DOM
</span><span>$('.sort').live('click',JQUERY4U.sortClickListener);
</span>
<span>[code lang="js"]
</span><span>//function inside JQUERY4U namespace
</span><span>sortClickListener: function(){
</span>
	<span>// Find second class name
</span>	<span>var button = $(this).attr('class').split(' ');
</span>	<span>// Sort table
</span>	<span>$(this).toggle(function() {
</span>		<span>$('.item').tsort('.'+button[1],{order:'desc'});
</span>	<span>}, function() {
</span>		<span>$('.item').tsort('.'+button[1]);
</span>	<span>}).trigger('click'); /*force the button to work with 1 click*/
</span><span>},</span>
ログイン後にコピー
別の方法は、.dataメソッドを使用することですが、これは過剰になり、パズルを解くための長い巻き上げ方法です。
<span>$(".reply").live('click', function () {
</span>    <span>var toggled = $(this).data('toggled');
</span>    <span>$(this).data('toggled', !toggled);
</span>    <span>if (!toggled) {
</span>        <span>x1();
</span>    <span>}
</span>    <span>else {
</span>        <span>x2();
</span>    <span>}
</span><span>});</span>
ログイン後にコピー

jQueryトグル

に関するよくある質問(FAQ) jQuery toggle()とtoggleclass()?

の違いは何ですか?これは、要素が最初に表示された場合、それは隠され、その逆になることを意味します。一方、Toggleclass()関数は、選択した要素から1つ以上のクラスを追加または削除するために使用されます。これは、指定されたクラスが存在する場合、削除され、存在しない場合、追加されることを意味します。

jQuery Toggle()を使用して複数の要素を表示または非表示にするにはどうすればよいですか?たとえば、クラスの「myDiv」に複数のDIV要素がある場合、$( '。myDiv')を使用して可視性を切り替えることができます。トグル()。 Toggle()関数は、持続時間とコールバックの2つのパラメーターを使用できます。期間パラメーターはアニメーションの持続時間を指定し、コールバックパラメーターは、gqueryトグル()関数が機能しないのはなぜですか?いくつかの一般的な問題には、jQueryライブラリがプロジェクトに適切に含まれていないこと、選択しようとしている要素が存在しないか、要素のCSS表示プロパティが「なし」に設定されています。たとえば、Toggle()関数を使用してクリックしたときにボタンのテキストを変更する関数を作成できます。

ホバーでjQueryトグル()を使用できますか?

はい、jquery toggle()関数をホバーで使用できます。ただし、Hoverイベントは標準のJavaScriptイベントではないため、代わりにMouseenterイベントとMouseleaveイベントを使用する必要があります。これらのイベントのコールバック関数でToggle()関数を使用して、マウスポインターが入力または離れるときに要素を表示または非表示にすることができます。チェックボックスの変更イベントを使用して、チェックされた状態が変更されるたびにトグル()関数を呼び出すことができます。チェックボックスと同様に、ラジオボタンの変更イベントを使用して、選択したラジオボタンが変更されるたびにトグル()関数を呼び出すことができます。ドロップダウンボタンのクリックイベントを使用して、toggle()関数を呼び出すことができます。

フォームでjquery toggle()を使用できますか?たとえば、Toggle()関数を使用して、ドロップダウンメニューの選択したオプションに基づいて、テキスト入力フィールドを表示または非表示にできます。

以上がjquery .toggle()をライブまたはバインドして使用しますの詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。

このウェブサイトの声明
この記事の内容はネチズンが自主的に寄稿したものであり、著作権は原著者に帰属します。このサイトは、それに相当する法的責任を負いません。盗作または侵害の疑いのあるコンテンツを見つけた場合は、admin@php.cn までご連絡ください。
著者別の最新記事
人気のチュートリアル
詳細>
最新のダウンロード
詳細>
ウェブエフェクト
公式サイト
サイト素材
フロントエンドテンプレート