fonction de liaison à plusieurs éléments avec Jquery

J'ai ce petit problème avec jquery: Je dois faire quelque chose comme ceci:fonction de liaison à plusieurs éléments avec Jquery

$(document).ready(function(){ 
    links = {}; 
    links.a = "Link a"; 
    links.b = "Link b"; 
    links.c = "Link c"; 

    for (x in links){ 
     $("#" + x).css("border","1px solid #000"); 
     $("#" + x).click(function(){ 
      alert(x); 
     }); 
    } 
}); 
</script> 
<div id="a">a</div><br /> 
<div id="b">b</div><br /> 
<div id="c">c</div><br />

Alors que lorsque vous cliquez sur div # un vous obtiendrez « Lien une » alerte , "Link b" sur div # b et ainsi de suite ... Le problème est que si vous exécutez ce code, en cliquant sur chaque élément donnera alerte ("Lien c") comme résultat, il semble que seule la dernière variation de fonction est affecté à chaque div ...

Bien sûr, je peux le pirater en éditant la fonction pour travailler avec l'id de div et en utilisant $ (ceci), mais pour la cursiosité: y a-t-il un moyen de faire fonctionner ce cycle? En créant et en affectant une nouvelle fonction à chaque élément en fonction?

Thx à l'avance ...

Source

2009-05-15 Alekc

Juste Pour votre information, il est un peu plus propre si vous enchaînez votre lieu jQuery de sélectionner à nouveau le sélecteur. * Exemple: * '$ ('#' + x) .css ('border', '1px solid # 000'). Cliquez sur (fn);' –

Utilisez une fermeture: (un « cette » solution est plus élégante, mais je poste car une réponse maintenant supprimé avait une solution de fermeture qui ne fonctionne pas)

$(document).ready(function(){ 
    links = {}; 
    links.a = "Link a"; 
    links.b = "Link b"; 
    links.c = "Link c"; 

    for (var x in links){ 
     $("#" + x).css("border","1px solid #000"); 
     $("#" + x).click(
      function(xx){ 
       return function() { alert(xx) }; 
      }(x) 
     ); 
    }; 
});

Source

2009-05-15 14:49:58

Merci, c'était ce que je cherchais :) – Alekc

Vous devez utiliser "ce".

$(document).ready(function(){ 
    links = {}; 
    links.a = "Link a"; 
    links.b = "Link b"; 
    links.c = "Link c"; 

    for (var x in links){ 
     $("#" + x).css("border","1px solid #000"); 
     $("#" + x).click(function(){ 
       alert("Link "+this.id+" Alert!"); 
     }); 
    } 
});

Source

2009-05-15 14:35:03 gradbot

<script type="text/javascript"> 
$(document).ready(function(){ 
    links = {}; 
    links.a = "Link a"; 
    links.b = "Link b"; 
    links.c = "Link c"; 

    for (x in links){ 
     $("#" + x).css("border","1px solid #000").click(function(){ 
       alert($(this).attr('id')); 
     }); 
    } 
}); 
</script> 

</head> 

<body> 

<div id="a">a</div><br /> 
<div id="b">b</div><br /> 
<div id="c">c</div><br />

Source

2009-05-15 14:36:56

<script type="text/javascript"> 
$(document).ready(function(){ 
    $('.links').css("border","1px solid #000"); 
    $('.links').live('click', function() { 
     alert("Link " + $(this).attr('id')); 
    }); 
}); 
</script> 
</head> 
<body> 
<div id="a" class="links">a</div><br /> 
<div id="b" class="links">b</div><br /> 
<div id="c" class="links">c</div><br />

Source

2009-05-15 14:56:58

Je crois que c'est ce que vous êtes après:

$(document).ready(function(){ 
    links = { 
     a:"Link a", 
     b:"Link b", 
     c:"Link c", 
    }; 

    $.each(links, function(id,text){ 
     $("#"+id) 
     .css("border","1px solid #000") 
     .click(function(){ alert(text) }) 
    }) 
});

Source

2009-05-15 15:02:46 duckyflip

IMO c'est la seule réponse saine autre que celle acceptée. En utilisant chaque méthode de jQuery, vous créez une fermeture en cours d'exécution; pour chaque fois que la fonction est exécutée. Bon travail! – James

Voyant que vous hardcoding les éléments à effectuer de toute façon, vous pourriez aussi bien le faire de cette façon car il est probable que plus rapide et il est plus propre, l'OMI:

$("#a,#b,#c").css("border","1px solid #000"); 
$("#a,#b,#c").click(function(){ 
    alert("Link "+this.id+" Alert!"); 
});

Edit: Je ne vois pas la dernière partie de votre question ... Pardon. Vous pouvez aussi le faire:

var links = {}; 
links.a = "Link a"; 
links.b = "Link b"; 
links.c = "Link c"; 

var ids = ''; 
$.each(function(key,val) { 
    ids += "#"+key+","; // extra commas are ignored in jQuery 
}); 

$(ids) 
    .css("border","1px solid #000") 
    .bind('click',function(){ 
     alert("Link "+this.id+" Alert!"); 
    });

Source

2009-05-15 15:05:19 KyleFarris

la bonne chose à propos jQuery est-il permet de chaîner et lier plusieurs éléments comme css.

$(document).ready(function(){ 

    $('#a,#b,#c') 
     .css("border","1px solid #000") 
     .bind('click',function(){ 
      // do something 
     }); 

});

Source

2010-01-12 15:00:00

Essayez d'utiliser:

$(window).load(function(){ 

});

Source

2011-12-08 15:20:51 DatPT

travail Démo http://jsfiddle.net/FWcHv/

en vous le code que vous appelez constructeur jQuery plusieurs fois à savoir $('#a') que $('#b') et $('#c') au lieu que vous devez appeler comme $('#a,#b,#c')

Dans mon code j'ai passé tous les identifiants en utilisant $ .each et les ai combinés et dans l'étape suivante j'ai utilisé $('#a,#b,#c') stocké dans la variable x pour rendre le code optimisé et facile.

i ont également fait un chèque que si links{} est vide, il traite pas en utilisant la variable i

$(document).ready(function() { 
    links = {}; 
    links.a = "Link a"; 
    links.b = "Link b"; 
    links.c = "Link c"; 
    i = 0; 
    x = ''; 
    $.each(links, function (id) { 
     x += "#" + id + ','; 
     i++; 
    }); 
    if (i > 0) { 
     $($(x.slice(0, -1))).css("border", "1px solid #000").click(function() { 
      alert($(this).text()); 
     }); 
    } 
});

Source

2013-07-20 07:22:25

fonction de liaison à plusieurs éléments avec Jquery

Répondre

Questions connexes