使用单击功能获取div的内容

Question

我目前正在尝试使用javascript实现某种“按钮”。 当用户单击div时，div背景应更改颜色，并且应该弹出一个列出设备编号的窗口。 我计划以后使用该号码重定向客户端。 但是现在，我无法注册点击事件。 我让事件正常工作了一段时间，但该值始终是'i'的最终值。 我的网页中也有JQuery。

这是一个JSFiddle和我的相关代码。 http://jsfiddle.net/G3ADG/9/

HTML结构：

<div class="device" id="device1" value="1">
    <div class="device-name" id="deviceName1">Name1</div>
</div>
<div class="device" id="device2" value="2">
    <div class="device-name" id="deviceName2">Name2</div>
</div>
<div class="device" id="device3" value="3">
    <div class="device-name" id="deviceName3">Name3</div>
</div>

使用Javascript：

(function() {
    var devices = document.getElementsByClassName("device");
    for (var i = 0; i < devices.length; i++) {
        devices[i].addEventListener("click", function () {
            alert(i);
            this.style.backgroundColor = "#000000";
        })
    }
})();

任何帮助或意见表示赞赏。

编辑：修复了ClassName调用。 返回的警报仍然是错误的。

Answer 1

如果您已经在使用jQuery-您可以尝试使用jQuery-

$('.device').on('click',function(){
   $(this).css('background-color','red');
})

演示---> http://jsfiddle.net/G3ADG/8/

Answer 2

检查这个小提琴 ：

您只需要关闭即可附加事件

(function () {
    var devices = document.getElementsByClassName("device");
    for (var i = 0; i < devices.length; i++) {
        (function (i) {
            devices[i].addEventListener("click", function () {
                alert(i);
                this.style.backgroundColor = "#000000";
            })
        })(i);
    }
})();

Answer 3

不用运行for循环，只需运行$('.device').each() 。 我还添加了警报以获取每个div.device的值。 看到这里： http : //jsfiddle.net/G3ADG/10/

编辑：我用bind而不是单击来完成它，因为这反映了他在普通JS中的处理方式。 使用PXL的解决方案on效果一样好，如果你不动态地添加div.device 。