Etat de bascule jQuery

Question

Voici le résumé rapide de mon problème:

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

Dans la fonction Un , un formulaire est affiché. Si l'utilisateur remplit correctement le formulaire, celui-ci est à nouveau masqué (pour revenir à son état d'origine).

Dans la fonction B , le même formulaire est masqué.

La théorie sous-jacente est que l’utilisateur peut choisir d’afficher le formulaire et de le remplir, ou cliquer à nouveau pour que le formulaire redevienne caché.

Maintenant, ma question est la suivante: actuellement, si l'utilisateur remplit le formulaire avec succès - et il se cache - il devra cliquer sur le lien deux fois avant de revenir à l'état de basculement qui affiche le formulaire.

Est-il possible de réinitialiser par programmation le commutateur à bascule à son état initial?

Answer 1

jQuery a deux méthodes .toggle () :

.toggle ()

  

Bascule chacun des ensembles de correspondance   éléments. Si elles sont affichées, basculez   les rend cachés. S'ils sont cachés,   bascule les fait apparaître.

.toggle (pair, impair)

  

Basculez entre deux appels de fonction tous les deux clics.

Dans ce cas, vous voulez le premier. Quelque chose comme ça devrait faire l'affaire:

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

Answer 2

Vous pouvez vérifier l'état de la bascule dans jQuery à l'aide de .is (": hidden") . Donc, dans le code de base ce que j'ai utilisé:

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

Answer 3

Voici ce que j'ai utilisé:

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

Answer 4

Ahh, ce sont les choses simples de la vie ...

J'utilisais la dernière définition de toggle (pair, impair); , mais j'avais oublié d'inclure dans ma description initiale du problème le fait que ma deuxième fonction de bascule masquait non seulement le formulaire, mais en le détruisant aussi.

function A : Ajax charge le formulaire dans un div ajouté. Cachez et détruisez la div sur un post de formulaire réussi.

fonction B : détruit le div.

Vous m'avez tous deux rappelé que toggle (); ne traite que de la propriété CSS et que, par conséquent, il ne convient pas à cette tâche. Mais ensuite, j'ai réalisé que je rechargeais inutilement le formulaire sur chaque "étrange". état en le détruisant quand j'ai eu fini, alors je suis finalement revenu à ceci:

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

... qui fait ce que je veux qu'il fasse. Merci de m'avoir mis au clair sur toggle (); !

Answer 5

Nous sommes allés avec celui-ci pour éviter la classe supplémentaire de masquage / exposition. Je pense que ceci est plus flexible que la solution de foxy car vous pouvez ajouter plus de fonctions à l'intérieur mais ne me citez pas sur le fait que je suis un noob

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

Answer 6

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

Remplacer masqué par visible