JQuery の使用法を切り替えます。

WBOY

リリース： 2016-05-16 18:41:28

オリジナル

1683 人が閲覧しました

今回は主にイベントの回転操作を切り替えるために使用されるtoggle(fn, fn,….)関数に焦点を当てます。
例: ボタンクリックイベントと DIV 背景の場合、ボタンを 1 回クリックすると、DIV 背景が青で表示され、2 回目にクリックすると、DIV の
背景色が黒に変更されます。
定義した HTML コードは次のとおりです。

=" DivToggle">ID "DivToggle" の内容がここに表示されます

定義された初期スタイルは次のとおりです:

コードをコピーしますコードは次のとおりです。

#DivToggle { 
高さ: 150px 
幅: 200px; margin: 50px; 
background-color: #6CC; 

 

最初に toggle() 関数を理解します。主に要素の表示状態を切り替えるために使用されます。要素が表示されている場合、.toggle() を呼び出した後は非表示になります。 

JQuery コード:

コードをコピーコードは次のとおりです:

ボタンをクリックすると、DIV が非表示になります。もう一度押すと DIV が表示され、ループします。

ここでは要素の表示と非表示を手動で設定できます。要素。

$("#DivToggle").toggle(600);

もちろん、この時点では、Web ページでよく遭遇することを考えることができます。表示し、マウスを離すとエフェクトが非表示になります。

もちろん、ここでは hover(fnover,fnout) イベントが使用されます。 fnover と fnout を上記の toggle(600) に設定するだけです;

ここでの fnover はマウスが上に移動したときのイベント関数であり、fnout はマウスが遠ざかったときのイベント関数です。

読みやすくするために、呼び出す別の関数として toggle(600) を設定しました。

コードをコピー

コードは次のとおりです:

このコードを振り返ってみると、toggle(fn,fn,…) 自体が Click イベントを追加するために使用されていると思います。次に、この要素のトグル
内の関数をループします。突然、私は少し混乱を感じました。ひねりのような。ニウニウが説明してくれることを願っています。
ラウンドロビン切り替え機能の効果を実証するために、ボタンをクリックして Div のスタイルを変更する方法はありません。
DIV スタイルを変更するコードは次のとおりです:

コードをコピーします

コードは次のとおりです:

< スクリプトタイプ="text/javascript"> $( function(event) { $("#DivToggle") .toggle(600); } $("#DivToggle").toggle(function() {

$(this).click(function() { $(this).css("background ", "青"); } );

}, function(event) {
$(this).click(function() { $(this).css("background", "Green"); });
}) ;
}
);
この時点で、上記の効果を実現するには、イベントをボタン、つまり「btnShow」に直接ロードする必要があることに突然思いつきました。これは、まず表示を非表示にしてから、DIV のスタイルを変更することを意味します。詳細なコードは次のとおりです。

コードをコピーコードは次のとおりです。

 
< script type="text /javascript"> 
$( 
function(event) { 

function OverOut(event) { 
$("#DivToggle").toggle(600) ; 
} 

$("#btnShow").toggle(
OverOut, OverOut, 
function() { $("#DivToggle").css({ "背景": "緑" }) }, 
function() { $("#DivToggle").css({ "背景": "青" }) } 

} 
); 
 

 

これにより、最初に非表示にしてから表示し、次にスタイルを変更することができます。