无法在动态创建的 html 元素上正确创建翻转

Question

我基于对一组名称的循环动态创建了一些按钮，然后我想在这些按钮上添加翻转操作，但是此代码中的 alert() 总是打印 last 的名称项目（黑色）。

我尝试在alert() 部分上使用eval()，但没有任何区别。 我希望它返回 红色、绿色或黑色，具体取决于我将鼠标悬停在哪个按钮上。

<div id="channels_buttons_container">
</div>

<script>

channels_array = ["red", "green", "black"];

for(var i = 0; i < channels_array.length; i++) {

    loop_channel_name = channels_array[i];

    // append an element inside the container
    var new_button_element = document.createElement("span");
    new_button_element.id = 'channel_button_'+loop_channel_name;
    new_button_element.innerHTML = '<br>BLA BLA';

    document.getElementById('channels_buttons_container').appendChild(new_button_element);

    // try to add rollover actions on the new button
    document.getElementById('channel_button_'+loop_channel_name).onmouseover = function(){
        alert('Rollover '+loop_channel_name);
    }

}

</script>

Answer 1

代码没问题，但是当你使用“loop_channel_name”时，取数组的最后一个元素。您必须传递实际元素（this）：

 document.getElementById('channel_button_'+loop_channel_name).onmouseover = function(){

        alert('Rollover '+this.id);
    }

Example

Answer 2

loop_channel_name 被初始化为全局变量，因为您没有使用 var 关键字。试试var loop_channel_name 而不是loop_channel_name。当您在 for 循环的第一次迭代中初始化 loop_channel_name 时，您将其创建为全局变量，而在后续迭代中，您只是在更新它而不是创建新的引用。通过在警报中引用 loop_channel_name，您正在引用在循环的最后一次迭代中更新为 black 的全局变量，因此它总是提醒 black。

示例

<div id="channels_buttons_container">
</div>

<script>

channels_array = ["red", "green", "black"];

for(var i = 0; i < channels_array.length; i++) {

    var loop_channel_name = channels_array[i];

    var new_button_element = document.createElement("span");
    new_button_element.id = 'channel_button_'+loop_channel_name;
    new_button_element.innerHTML = '<br>BLA BLA';

    document.getElementById('channels_buttons_container').appendChild(new_button_element);

    document.getElementById('channel_button_'+loop_channel_name).onmouseover = function(){
        alert('Rollover '+loop_channel_name);
        /*You could also do*/
        alert('Rollover '+ channels_array[i]);
    }
    // 

}

</script>