Функция привязки к нескольким элементам с помощью Jquery
Вопрос
У меня есть небольшая проблема с 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 />
Чтобы при нажатии на div#a вы получали предупреждение «Ссылка a», «Ссылка b» на div#b и так далее…Проблема в том, что если вы запустите этот код, щелчок по каждому элементу приведет к появлению предупреждения («Ссылка c»), кажется, что каждому div назначается только последний вариант функции...
Конечно, я могу взломать его, отредактировав функцию для работы с идентификатором div и используя $(this), но для любопытства:есть ли способ заставить этот цикл работать?Создавая и назначая новую функцию каждому элементу функции?
Спасибо заранее...
Решение
Используйте закрытие:(решение «это» более элегантно, но я публикую это, потому что в уже удаленном ответе было решение для закрытия, которое не сработало)
$(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)
);
};
});
Другие советы
Самое приятное в jQuery то, что он позволяет объединять и связывать несколько элементов так же, как css.
$(document).ready(function(){
$('#a,#b,#c')
.css("border","1px solid #000")
.bind('click',function(){
// do something
});
});
Я считаю, что это то, что вам нужно:
$(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) })
})
});
Рабочая демонстрация http://jsfiddle.net/FWcHv/
в вашем коде вы вызываете конструктор jQuery много раз, т.е. $('#a')
чем $('#b')
и $('#c')
вместо этого вы должны позвонить как $('#a,#b,#c')
В своем коде я прошел через все идентификаторы, используя $.each, и объединил их, а на следующем шаге я использовал $('#a,#b,#c')
хранится в переменной x
чтобы сделать код оптимизированным и простым.
я также проверил, что если links{}
пусто, оно не будет обрабатываться с использованием переменной 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());
});
}
});
<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 />
Вам нужно использовать «это».
$(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 />
Поскольку вы в любом случае жестко кодируете элементы, на которые нужно воздействовать, вы могли бы сделать это таким образом, поскольку это, вероятно, быстрее и чище, IMO:
$("#a,#b,#c").css("border","1px solid #000");
$("#a,#b,#c").click(function(){
alert("Link "+this.id+" Alert!");
});
Редактировать: Я не увидел последнюю часть вашего вопроса...Извини.Вы также можете сделать это:
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!");
});
Попробуйте использовать:
$(window).load(function(){
});
:)