portée Jquery

Question

Je viens de commencer l'apprentissage Jquery, mais les exemples ne me aidais beaucoup ...

maintenant ce qu'il se passe avec le code suivant est que j'ai 4 formes que je passe entre l'aide d'un lien pour chaque . Mais ce que je ne peux pas comprendre, c'est comment obtenir la variable "postOptionSelected" dans la première fonction pour passer aux autres fonctions pour afficher encore plus d'options utilisateur. Je réalise que la variable n'est pas la portée mais comment je fais ça?

$(document).ready(function(){ 

$("#postOptions ul li a").click(function(event){ 
     var postOptionSelected = $(this).parent("li").attr("class").substr(11); 
     $("form#post"+postOptionSelected).css('display', 'block'); 
     $("form.postForm:not(#post"+postOptionSelected+")").css('display', 'none'); 
     event.preventDefault(); 
}); 

$("form#post"+postOptionSelected+" div#postMore"+postOptionSelected+" a").click(function(event){ 
    $("form#post"+postOptionSelected+" div#postMore"+postOptionSelected).css('display', 'none'); 
    $("form#post"+postOptionSelected+" div#postLess"+postOptionSelected).css('display', 'block'); 
    $("form#post"+postOptionSelected+" div#postView"+postOptionSelected).css('display', 'block'); 
    event.preventDefault(); 
}); 

$("form#post"+postOptionSelected+" div#postLess"+postOptionSelected+" a").click(function(event){ 
    $("form#post"+postOptionSelected+" div#postLess"+postOptionSelected).css('display', 'none'); 
    $("form#post"+postOptionSelected+" div#postMore"+postOptionSelected).css('display', 'block'); 
    $("form#post"+postOptionSelected+" div#postView"+postOptionSelected).css('display', 'none'); 
    event.preventDefault(); 
}); 

}); 

Answer 1

Votre problème n'est pas tant la portée variable; C'est juste que les gestionnaires de clics plus/moins sont quelque chose que vous voulez toujours être sur les ancres en question, pas quelque chose que vous ajoutez et supprimez. À moins que vous ne souhaitiez vraiment supprimer les gestionnaires de clic, ce qui n'est pas amusant. Essayez cette version. Il exige que les classes pertinentes soient disponibles sur les éléments DOM concernés, pas seulement sur les ID; J'espère que vous verrez ce que cela implique. J'ai également pris la liberté d'utiliser les versions abrégées de jQuery de certaines de vos opérations.

$(document).ready(function(){ 

    $("#postOptions ul li a").click(function(event){ 
     var sel = $(this).parent("li").attr("class").substr(11); 
     $("form#post"+sel).show(); 
     $("form.postForm:not(#post"+sel+")").hide(); 
     event.preventDefault(); 
    }); 

    $("form.post div.postMore a").click(function(event){ 
     $(this).hide(); 
     $(this).siblings('div.postLess').show(); 
     $(this).siblings('div.postView').show(); 
     event.preventDefault(); 
    }); 

    $("form.post div.postLess a").click(function(event){ 
     $(this).hide(); 
     $(this).siblings('div.postMore').show(); 
     $(this).siblings('div.postView').hide(); 
     event.preventDefault(); 
    }); 

});