•  04-07-2019
  •  | 
  •  

質問

ここに私の問題の簡単な説明を示します：

$("a").toggle(function() { /*function A*/ }, function() { /*function B*/ });

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

function B 内では、同じフォームが非表示になります。

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

今、私の質問は次のとおりです。現在、ユーザーがフォームに正常に入力して非表示になった場合、ユーザーはリンクをクリックする必要があります 2回 フォームを表示するトグル状態に戻る前。

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

役に立ちましたか？

解決

jQueryには2つの .toggle（）メソッドがあります：

.toggle（）

  

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

.toggle（even、odd）

  

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

この場合、最初のものが必要です。このような何かがトリックを行う必要があります：

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

他のヒント

.is（＆quot;：hidden＆quot;）を使用して、jQueryのトグルの状態を確認できます。基本的なコードでは、私が使用したもの：

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

使用したものは次のとおりです。

$(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');
        }
    });  
});

ああ、それは人生のシンプルなものです...

toggle（even、odd）; の後者の定義を使用していましたが、2番目のトグル機能がフォームを隠すだけでなく、破壊します。

function A ：Ajaxはフォームを追加されたdivにロードします。正常なフォーム投稿でdivを非表示にして破棄します。

function B ：divを破壊します。

2人とも toggle（）; がCSSプロパティのみを処理することを思い出しました。そのため、このタスクには適していません。しかし、その後、各「奇数」のフォームを不必要に再ロードしていることに気付きました。完了時にそれを破壊することで状態を変更し、最終的にはこれに戻りました。

$("link").click(function() {
    if ($(this).siblings(".form-div").length == 0) {
        // form is not loaded; load and show the form; hide when done
    }
    else {
        $(this).siblings(".form-div").toggle();
    }
});

...これは私がやりたいことをします。 toggle（）; ！

についてまっすぐに設定してくれてありがとう

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

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

$("#div_clicked").click(function() {
  if ($("#toggle_div").is(":visible")) {
     // do this
  } else {
     // do that
}

非表示を可視に置換

ライセンス： CC-BY-SA と 帰属
所属していません StackOverflow
scroll top