Как правильно повесить функцию при цикличном создании div блоков?
Доброго времени суток. Подскажите пожалуйста, как нужно правильно повесить функцию в данном примере, чтобы в алерт вывелось название элемента по которому создался блок?
Никак не могу допетрить. Можно, конечно, присвоить создаваемому блоку id с одноименным названием из массива, и потом послать его в алерт - но этот вариант не подходит.
<style type="text/css">
.div_class{position:relative; display: inline-block; background-color:gray; border:1px solid red; width:30px; height:30px; margin-left:5px; cursor:pointer;}
.div_class:hover{background-color:green;}
</style>
<body>
<script>
var arr = ["raz","dva","tri"]
for(i=0; i<arr.length; i++){
var box_div = document.createElement('div')
box_div.className='div_class'
document.body.appendChild(box_div)
box_div.onmouseup=function(){alert(arr[i])}
}
</script>
|
<style type="text/css">
.div_class{position:relative; display: inline-block; background-color:gray; border:1px solid red; width:30px; height:30px; margin-left:5px; cursor:pointer;}
.div_class:hover{background-color:green;}
</style>
<body>
<script>
var arr = ["raz","dva","tri"]
for(i=0; i<arr.length; i++){
var box_div = document.createElement('div');
box_div.className='div_class';
document.body.appendChild(box_div);
addHandler.call(box_div, arr[i]);
}
function addHandler(num) {
this.onmouseup=function(){alert(num);};
};
</script>
Не буду претендавать на то что мое решение самое верное. |
Классическая ошибка. Ваша функция onmouseup будет вызвана уже после окончания цикла, по событию mouseup. А к этому времени значение i проитерируется с 0 до 4 и четверкой так и останется. В итоге arr[4] == undefined.
Вариант:
<style type="text/css">
.div_class{position:relative; display: inline-block; background-color:gray; border:1px solid red; width:30px; height:30px; margin-left:5px; cursor:pointer;}
.div_class:hover{background-color:green;}
</style>
<body>
<script>
var arr = ["raz","dva","tri"]
var fn = function(i, e) {
alert(arr[i])
}
var ret = function(i) {
return function(e) {
fn.apply(this, [i, e])
}
}
for(var i=0; i<arr.length; i++){
var box_div = document.createElement('div')
box_div.className='div_class'
document.body.appendChild(box_div)
box_div.onmouseup= ret(i)
}
</script>
|
Всё верно, всё правильно :) Я уже понял что нужно в алерт выводить другой функцией, открыл для себя интересный метод call )) Спасибо вам ребята :)
|
| Часовой пояс GMT +3, время: 00:13. |