web-dev-qa-db-fra.com

Existe-t-il quelque chose comme jQuery.toggle (booléen)?

J'écris beaucoup quelque chose de similaire au code suivant. Il bascule essentiellement un élément en fonction d'une condition.

Dans l'exemple composé suivant, la condition est "Si la case à cocher agree est cochée et que le champ name n'est pas vide".

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

Je souhaite qu'il y ait une sorte de fonction jQuery qui fonctionnerait comme ça.

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

Y a-t-il quelque chose comme ça là-bas? Ou existe-t-il d'autres moyens que le premier exemple pour le faire dans un cadre moins if-else-ish façon?

javascriptjquerytoggle
65
jessegavin

Ok, donc je suis un idiot et je dois RTM avant de poser des questions.

jQuery.toggle () vous permet de le faire hors de la boîte.

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

Tout d'abord, voyons si je comprends bien ce que vous voulez faire correctement ... Vous voulez regarder l'état d'une case à cocher (cochée ou non) et masquer ou afficher un deuxième div en fonction du statut de cette valeur.

Définissez ce style:

.noDisplay {
    display:none;
}

Utilisez ce JavaScript:

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

La documentation de jQuery à ce sujet peut être trouvée ici: http://api.jquery.com/toggleClass/

8
Richard June

Vous pouvez écrire la fonction vous-même.

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

Ensuite, utilisez-le comme ceci:

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