web-dev-qa-db-ja.com

jQueryトグル状態

これが私の問題のすばやく細いものです：

$（ "a"）。toggle（function（）{/ * function A * /}、function（）{/ * function B * /}）;

内部function Aフォームが表示されます。ユーザーがフォームに正しく入力すると、フォームは再び非表示になります（元の状態に戻ります）。

内部function B同じフォームが非表示になっています。

この背後にある理論は、ユーザーがフォームを表示して入力するか、もう一度クリックしてフォームを非表示に戻すかを選択できるというものです。

今私の質問はこれです：現在、ユーザーがフォームに正常に記入し、それが非表示になっている場合、ユーザーはリンクをクリックする必要がありますtwiceフォームを表示するトグル状態に戻る前。

とにかくプログラムでトグルスイッチを初期状態にリセットする方法はありますか？

jquerytogglereset
16
neezer

jQueryには2つの.toggle()メソッドがあります。

.toggle()

一致した要素の各セットを切り替えます。それらが表示されている場合、トグルはそれらを非表示にします。非表示になっている場合、toggleを使用すると表示されます。

.toggle(even, odd)

2回のクリックごとに2つの関数呼び出しを切り替えます。

この場合、最初のものが必要です。このような何かがうまくいくはずです：

$("a").click(function() {
    $("#theForm").toggle();
});
20
foxy

.is(":hidden")を使用して、jQueryでトグルの状態を確認できます。だから私が使った基本的なコードでは：

$("#div_clicked").click(function() {
  if ($("#toggle_div").is(":hidden")) {
     // do this
  } else {
     // do that
}
}); # add missing closing
36
Nicky Vandevoorde

これが私が使ったものです：

$(document).ready(function() {
    $('#listing_position').click(function() {

    var div_form = $('#listing_position_input');
        if (div_form.hasClass('hide')) {
           div_form.removeClass('hide');
        } else {
          div_form.addClass('hide');
        }
    });  
});
5
Michal Zuber

追加の非表示/表示クラスを回避するために、これと一緒に行きました。機能を追加できるのでfoxyのソリューションよりも柔軟性があると思いますが、私は初心者なので引用しないでください

$("#clickie").click(function(){
  if ( $("#mydiv").css("display") == "none" ){
     $("#mydiv").show();
       } else {
        $("#mydiv").hide();
}
2
xiatica

ああ、それは人生の簡単なことです...

後者のtoggle(even,odd);の定義を使用していましたが、2番目のトグル関数がフォームを非表示にするだけでなく、フォームも破壊するという問題の元の説明に含めるのを忘れていました。

_function A_：Ajaxはフォームを追加されたdivにロードします。成功したフォーム投稿でdivを非表示にして破棄します。

_function B_：divを破棄します。

toggle();はCSSプロパティのみを処理するため、このタスクには適していません。しかし、それが終わったときにフォームを破棄することにより、各「奇数」状態のフォームを不必要に再ロードしていることに気づき、結局これに戻りました。

$（ "link"）。click（function（）{
 if（$（this）.siblings（ "。form-div"）。length == 0）{
 //フォームはロードされていない;フォームをロードして表示する;完了時に非表示にする
} 
 else {
 $（this）.siblings（ "。form-div"）。toggle（）; 
} 
}）;

...私がやりたいことを行います。 toggle();についてご説明いただきありがとうございます。

2
neezer