la fonction de liaison à plusieurs éléments avec Jquery
Question
J'ai ce petit problème avec jquery: Je dois faire quelque chose comme ceci:
$(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 « Lier un » alerte « Lien 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 ( « Link c ») comme résultat, il semble que seule la dernière variation de fonction est attribué à chaque div ...
Bien sûr, je peux le pirater en éditant la fonction de travailler avec l'id div et en utilisant $ (cela), mais pour cursiosity: est-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 ...
La solution
Utilisez une fermeture: (un « cette » solution est plus élégante, mais je poste ce parce qu'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)
);
};
});
Autres conseils
la bonne chose à propos jQuery est-il permet le chaînage et lier plusieurs éléments comme css.
$(document).ready(function(){
$('#a,#b,#c')
.css("border","1px solid #000")
.bind('click',function(){
// do something
});
});
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) })
})
});
vous le code que vous appelez constructeur jQuery plusieurs fois i.e. que $('#a')
et $('#b')
au lieu que vous devriez $('#c')
appeler comme $('#a,#b,#c')
Dans mon code, je suis passé par tous à l'aide de $ .Chaque de l'identifiant et les combinés et à l'étape suivante, je l'ai utilisé dans la variable stockée x
pour rendre le links{}
code optimisé et facile.
J'ai aussi fait un chèque que si est vide, il i
ne traite pas en utilisant la variable <=>
$(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());
});
}
});
<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 />
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!");
});
}
});
<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 />
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!");
});
Modifier Je ne vois pas la dernière partie de votre question ... Désolé. Vous pouvez également faire ceci:
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!");
});
Essayez d'utiliser:
$(window).load(function(){
});
:)