Passing параметры в событии Javascript onClick
Я пытаюсь передать параметр в событии onclick. Ниже приведен пример кода:
<div id="div"></div>
<script language="javascript" type="text/javascript">
var div = document.getElementById('div');
for (var i = 0; i < 10; i++) {
var link = document.createElement('a');
link.setAttribute('href', '#');
link.innerHTML = i + '';
link.onclick= function() { onClickLink(i+'');};
div.appendChild(link);
div.appendChild(document.createElement('BR'));
}
function onClickLink(text) {
alert('Link ' + text + ' clicked');
return false;
}
</script>
Однако, когда я нажимаю на любую из ссылок, в предупреждении всегда отображается «Ссылка 10 нажата»!
Может кто-нибудь сказать мне, что я делаю неправильно?
Спасибо
5 ответов
Это происходит потому, что i распространяется вверх по области после вызова функции. Вы можете избежать этой проблемы, используя закрытие.
for (var i = 0; i < 10; i++) {
var link = document.createElement('a');
link.setAttribute('href', '#');
link.innerHTML = i + '';
link.onclick = (function() {
var currentI = i;
return function() {
onClickLink(currentI + '');
}
})();
div.appendChild(link);
div.appendChild(document.createElement('BR'));
}
Или, если вам нужен более сжатый синтаксис, я предлагаю вам использовать решение Ника Крейвера.
link.onclick = function() { onClickLink(i+''); };
Является закрытием и сохраняет ссылку на переменную i , а не значение, которое ] i сохраняется при создании функции. Одним из решений было бы заключить содержимое цикла for в функцию do this:
for (var i = 0; i < 10; i++) (function(i) {
var link = document.createElement('a');
link.setAttribute('href', '#');
link.innerHTML = i + '';
link.onclick= function() { onClickLink(i+'');};
div.appendChild(link);
div.appendChild(document.createElement('BR'));
}(i));
Попробуйте следующее:
<div id="div"></div>
<script language="javascript" type="text/javascript">
var div = document.getElementById('div');
for (var i = 0; i < 10; i++) {
var f = function() {
var link = document.createElement('a');
var j = i; // this j is scoped to our anonymous function
// while i is scoped outside the anonymous function,
// getting incremented by the for loop
link.setAttribute('href', '#');
link.innerHTML = j + '';
link.onclick= function() { onClickLink(j+'');};
div.appendChild(link);
div.appendChild(document.createElement('br')); // lower case BR, please!
}(); // call the function immediately
}
function onClickLink(text) {
alert('Link ' + text + ' clicked');
return false;
}
</script>
Это происходит потому, что все они ссылаются на одну и ту же переменную i , которая изменяется в каждом цикле, и остается как 10 at конец петли. Вы можете решить эту проблему, используя закрытие, подобное этому:
link.onclick = function(j) { return function() { onClickLink(j+''); }; }(i);
Вы можете попробовать это здесь
Или сделайте this ссылкой, которую вы щелкнули в этом обработчике, например:
link.onclick = function(j) { return function() { onClickLink.call(this, j); }; }(i);
или вы можете использовать эту строку:
link.setAttribute('onClick', 'onClickLink('+i+')');
вместо этой:
link.onclick= function() { onClickLink(i+'');};