web-dev-qa-db-ja.com

jQuery.toggle（boolean）のようなものが存在しますか？

次のコードに似たものをたくさん書きます。基本的に、何らかの条件に基づいて要素を切り替えます。

次の構成例では、条件は「agree」チェックボックスがチェックされ、nameフィールドが空でない場合です。

$("button").click(function() {
  if ($("#agree").is(":checked") && $("#name").val() != "" ) {
    $("#mydiv").show();
  } else {
    $("#mydiv").hide();
  }
});

このように機能するjQuery関数があればいいのにと思います。

$("button").click(function() {
  var condition = $("#agree").is(":checked") && $("#name").val() != "" );
  $("#mydiv").toggle(condition);
});

このようなものはありますか？または、最初の例に加えて、_if-else-ish 仕方？

javascriptjquerytoggle
65
jessegavin

わかりましたので、私はばかで、質問する前にRTMにする必要があります。

jQuery.toggle（） を使用すると、すぐにこれを実行できます。

$("button").click(function() {
  var condition = $("#agree").is(":checked") && $("#name").val() != "" );
  $("#mydiv").toggle(condition);
});
84
jessegavin

まず、あなたが正しくやりたいことを理解しているかどうかを確認しましょう...チェックボックスの状態（チェックされているかどうか）を見て、その値のステータスに基づいて2番目のdivを非表示または表示したいです。

このスタイルを定義します。

.noDisplay {
    display:none;
}

このJavaScriptを使用します。

$("button").click(function() {
  $("#mydiv").toggleClass("noDisplay", $("#name").val() == "");
});

JQueryのドキュメントは次の場所にあります。 http://api.jquery.com/toggleClass/

8
Richard June

自分で関数を書くことができます。

function toggleIf(element, condition) {
    if (condition) { element.show(); }
    else { element.hide(); }
}

次に、次のように使用します。

toggleIf($("button"), $("#agree").is(":checked") && $("#name").val() != "");
5
John Fisher