Existe-t-il quelque chose comme jQuery.toggle (boolean)?

Question

J'écris quelque chose de semblable à la suivante de code beaucoup. Essentiellement, il bascule un élément basée sur une condition.

Dans la suite de exemple, la condition est "Si l' agree case est cochée et que l' name champ 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 fonctionne comme cela.

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

Est là quelque chose comme cela? Ou existe-il d'autres façons d'ailleurs le premier exemple pour ce faire, dans un moins if-else-ish ?

Answer 1

Ok, alors je suis un idiot et j'ai besoin de RTFM avant de poser des questions.

jQuery.toggle () vous permet de le faire immédiatement .

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

Answer 2

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

Définir 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/

Answer 3

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() != "");
 

Answer 4

Si toggle() n'est pas bon pour vous (par exemple parce qu'il s'anime), vous pouvez écrire un petit plugin jQuery, comme ceci:

 $.fn.toggleIf = function(showOrHide) {
  return this.each(function() {
    if (showOrHide) {
      return $(this).show();
    } else {
      return $(this).hide();
    }
  });
};
 

et ensuite l'utiliser comme ça:

 $(element).toggleIf(condition);