2009-07-28 8 views
12

J'ai un div qui contient des paramètres et des options sur une page de gestion de compte.jQuery bascule et SI visible

$("#moreOptions").slideToggle('slow'); 
if ($("#moreOptions").is(":visible") == true) { 
    $("#lnkMoreOpt").text("Less Options «") 
} 
else { 
    $("#lnkMoreOpt").text("More Options »") 
} 

Le code devrait changer au-dessus du texte du lien plus/moins d'options selon qu'il soit visible ou non, mais il semble jQuery ne traite pas que de faire basculer invisible/visible. Comment puis-je implémenter ceci tout en utilisant la fonction de bascule?

+0

Je sais que c'est vieux, mais une autre option serait probablement de vérifier la valeur avant de commencer la bascule. – eselk

Répondre

33

Vous devez utiliser la fonction de rappel. Au moment où l'instruction if est évaluée, slideToggle ne sera pas terminé et vous obtiendrez des résultats incorrects.

$("#moreOptions").slideToggle('slow', callbackFn); 

function callbackFn(){ 

    var $link = $("#lnkMoreOpt"); 

    $(this).is(":visible") ? $link.text("Less Options «") : $link.text("More Options »"); 


} 
+0

Excellente réponse, fonctionne très bien! Je vous remercie. – j82374823749

+0

Pas de soucis, bonne chance avec ça. – redsquare

1

Je préfère ne pas utiliser des fonctions distinctes parce que quand une fonction ne je crois que cela est plus facile à comprendre pas besoin d'être utilisé deux fois, il est perte de code .. quand quelqu'un vient à elle ..

$("#moreOptions").slideToggle('slow', function(){ 
    var $link = $("#lnkMoreOpt"); 
    $(this).is(":visible") ? $link.text("Less Options «") : $link.text("More Options »"); 
}); 
0

Je pense que ce code ne fonctionnera

$('#element').toggle('slow', function() { 
    if($(this).is(':hidden')) { 
     $(this).text('This element is hidden.'); 
    } 
    else { 
     $(this).text('This element is visible.'); 
    } 
});