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

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

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

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

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

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



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

JQuery コード:

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

$(

function() {
$("#btnShow").click(function(event) {
$("#DivToggle ").toggle();
});
}
);



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

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

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


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

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

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

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




コードをコピー

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

function(event) {

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


このようにしてマウスを移動します。ボタンを押してオンにすると、DivToggle の非表示と表示の効果を確認できます。

toggle(fn, fn,...) の回転操作を示すために、上記の関数を使用し、次に btnShow を使用して Click イベントを追加して、最初に DIV を非表示および表示し、次にテーブル DIV のスタイル。

次のように隠しコードを表示できます (実際、このコードには問題がありますが、次のように記述すると望ましい効果が得られます):

コードをコピーします

コードは次のとおりです。 $( function(event) ) { function OverOut(event) {

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

}
$("#DivToggle").toggle(function() {
$(" #btnShow").click(OverOut);
}, function() {
$("#btnShow").click(OverOut);
);



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

コードをコピーします


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

$( 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 のスタイルを変更することを意味します。詳細なコードは次のとおりです。

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

$(
function(event) {

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

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

}
);

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