La taille de mon fichier JavaScript est hors de main, car j'ai des centaines de liens, et chacun a sa propre fonction JQuery, même si elles sont toutes de la même tâche.
Voici un court extrait: P >
$("#link1").click(function ()
{
$(".myDiv").hide();
$("#myDiv1").toggle();
});
$("#link2").click(function ()
{
$(".myDiv").hide();
$("#myDiv2").toggle();
});
$("#link3").click(function ()
{
$(".myDiv").hide();
$("#myDiv3").toggle();
});
9 Réponses :
Vous pouvez simplement avoir chaque clic appeler une fonction externe et transmettre un paramètre pour la chaîne de numéro.
ex:
J'aime la plupart de cette méthode parce que vous pouvez ajouter n'importe quel élément à tout autre élément. c'est à dire. $ ("coollink"). Cliquez sur ("1");
Comme écrit, votre code appellera bascule () lorsque la méthode .Click () est appliquée et non lorsque l'utilisateur clique sur le lien.
Je pense que c'est une simple refactoring
Vous pouvez définir une fonction comme tel p> , puis réutilisez-le là où vous en avez besoin P> $("#link1).click(doSomethingTo(thisDiv));
$("#link2).click(doSomethingTo(thisDiv));
Je pense que vous voulez dire " $ (" # link1) .Cliquez sur (Dosomethingto) ".
Vous êtes un peu d $ ("# link1"). Cliquez sur (Dosomethingto ("# MyDiv1"));
Cela va toujours appeler dosomethingto () immédiatement , ne pas l'assigner sous forme de gestionnaire de clic. Je crois que vous envisagez de $ ("# link1"). Cliquez sur (Fonction () {Dosomethingto (this);}) .
Vous pouvez ajouter une classe à tous les liens qui font la même chose et agissent avec jQuery sur cette classe.
$(".toggler").click( function(){
// toggle the divs
var number = $(this).attr("id").split('_')[1];
$(".myDiv").hide();
$("#myDiv"+ number).toggle();
});
IMHO, c'est la meilleure approche car lorsque vous ajoutez plus de «liens» et de «divs» dans votre HTML, le code s'occupe automatiquement de la gestion du comportement de bascule pour vous. BTW, ELZO, vous devez spécifier où proviennent la variable «numéro». Quelque chose comme var id = $ (ceci) .attr ('id'); Var Number = id.substr (id.indexof ('_'));
Je préfère utiliser des mécanismes de traversée plutôt que en fonction des formats / valeurs d'identification. Si les éléments sont liés, ils sont généralement étroitement alignés dans le DOM et peuvent facilement être trouvés à l'aide suivant / prev / trouvée / la plus proche, etc.
C'est une très bonne suggestion TVANFossaon. Mais parfois, il n'est pas possible de conserver ces éléments ensemble dans DOM en fonction de la mise en page de votre page. J'aime aussi l'idée de soldat d'utiliser l'attribut HREF pour avoir porté ces informations.
Curieux Pourquoi vous avez choisi l'ID pour masquer les données associatives? Stackoverflow.com/ Questions / 364412 / ...
Pas trop souvent, je vois un post que j'avais évoqué plus d'une fois. Excellente réponse!
@Soldarnal Je sais sur le plugin de métadonnées, mais à mon avis, son utilisation est destinée aux puristes. Il n'y a rien de mal à utiliser une classe pour créer une association pour des éléments communs. Il peut être utilisé dans CSS aussi bien dans JQuery. @Neil n :) thx | le code est la poésie
bâtiment sur la solution de Craig:
Ils ont une centaine de liens .. Donc, je n'aurai pas l'air bien d'écrire # link1 .. # link100 un par un :) (aussi, il ajoutera plus de codes)
Oups - n'a pas lu la chose totale . Typique moi. Dans ce cas, la solution d'Elzo ci-dessus est la meilleure.
Je change que le lien devient comme ceci (je renommerai l'ID à un numéro seulement) puis sur JS:
L'approche générale que j'utilise est d'utiliser les méthodes de traversée pour trouver des éléments connexes plutôt que d'utiliser des sélecteurs absolus. Cela vous permettra d'appliquer le même code aux éléments de la même configurés de la même manière sans aucune dépendance compliquée sur le format des identifiants, etc. FAIT correctement, il est également raisonnablement robuste à des modifications mineures à la marque.
Par exemple, disons que je Avoir une série de liens, suivi chacune d'un DIV qui sera basculé en cliquant sur ce lien. Les liens ont chacun une classe particulière afin qu'ils puissent facilement être référencés. P> Je trouverais ensuite tous les liens par classe, puis utilisez le suivant code> Méthode pour trouver le DIV associé et basculer sa visibilité. Notez que c'est un exemple simple. Vous devrez peut-être utiliser des mécanismes trershasels plus compliqués et filtrer par type ou classe d'élément, en fonction de votre marque exacte. P> $('.linkClass').click( function() {
$(this).next().toggle();
});
Si la mise en page de votre page permet à ce HTML, je préférerais cette approche. :)
Ma compréhension de votre exemple est que cela fait beaucoup d'hypothèses sur la relation d'éléments sur la page. Je travaille sur une page très stylisée dans laquelle l'élément "suivant" n'est pas liée au lien. (Au moins je le pense).
@ipso facto - comme je l'ai dit, cet exemple est relativement simple. S'il est vrai qu'il n'y a pas de relation DOM discernable entre les éléments, vous devrez alors trouver un autre mécanisme. Le cas typique est qu'ils sont liés et vous pouvez trouver un mécanisme à l'aide de la traversée pour accéder à l'élément associé. Trouver / Nextall + chacun, etc.
function makeToggler(number) {
$('#link' + number).click(function() {
$('.myDiv').hide();
$('#myDiv' + number).toggle();
});
}
makeToggler(1);
makeToggler(2);
makeToggler(3);
You can adapt this to meet your naming standards.Depending on the structure of your divs and links, there are better ways to do it. If you post the structure of your elements, I'll show you one.
Je pense que c'est l'approche la plus propre jusqu'à présent, également préférable car la fonction MakeToggler () peut être testée assez directement.
Qu'en est-il de l'ajout de l'identifiant de votre cible dans le HREF du lien?
$(".toggle").each(function(i) {
$(this).click(function(e) {
e.preventDefault();
$(".myDiv").hide();
$(".myDiv:eq("+i+")").toggle();
});
});
Jetez votre maketoggle dans une boucle? Ensuite, vous pourriez même le faire compter vos liens pour vous, quelque chose de lien?: P> function countElementsByClass(className){
var count = 0;
var o = document.getElementsByTagName("a").className;
for(var i=0;i<o.length;i+){
if(o[i].className == "accordion/whatever")
count ++;
}
return count;
}
Ou, $ ('a.accordian'). Longueur
Saint FSM. Je viens de me faire mouiller mes pieds avec jQuery et je travaille sur ce problème exactement depuis le déjeuner et est venu ici pour prendre une pause de pile!