jQuery Bascule État

Question

Voici le rapide et maigre de ma question:

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

intérieur function A un formulaire est affiché. Si l'utilisateur termine avec succès le formulaire, le formulaire est masqué à nouveau (retournant à son état d'origine).

À l'intérieur function B la même forme est masquée. La théorie sous-jacente est que l'utilisateur peut choisir d'afficher le formulaire et de le remplir, ou il peut cliquer à nouveau et faire revenir le formulaire dans la clandestinité.

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

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

Answer 1

jQuery a deux méthodes .toggle():

.toggle()

Bascule chacun de l'ensemble des éléments appariés . Si elles sont affichées, basculer les rend cachées. Si elles sont cachées, les fait apparaître.

.toggle(even, odd)

basculer entre deux appels de fonction tous les clic.

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

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

Answer 2

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

j'utilisais cette dernière définition de toggle(even,odd);, mais je l'avais oublié d'inclure dans ma description originale de le problème que ma seconde fonction bascule non seulement masquait la forme, mais la détruisait aussi.

function A: Ajax charge le formulaire dans un div ajouté. Cacher et détruire le div sur un post de forme réussie.

function B: Détruisez la div.

Vous m'avez tous les deux rappelé que toggle(); ne traite que la propriété CSS et n'est donc pas bien adaptée à cette tâche. Mais je me suis aperçu que je Rechargement inutilement la forme de chaque état « bizarre » en détruisant quand je fait, alors je suis venu finalement revenir à 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 à faire. Merci de m'avoir renseigné sur toggle();!

Answer 3

Voici ce que je:

$(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

J'y suis allé avec celui-ci pour éviter la classe cacher/spectacle supplémentaire. Je pense que cela est plus souple que la solution de Foxy que vous pouvez ajouter d'autres fonctions au sein, mais ne me citez pas que je suis un noob

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

Answer 5

Vous pouvez vérifier l'état de la bascule dans jQuery en utilisant .is(":hidden") . Donc, dans le code de base que je:

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

Answer 6

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

Replace caché avec visible