使用单击函数获取div的内容

Question

我目前正在尝试使用javascript实现一种“按钮”。当用户单击div时，div背景应该会改变颜色，并且应该有一个列出设备编号的弹出窗口。我计划稍后使用该号码重定向客户端。但是现在，我无法注册clicking事件。我让事件正常工作了一段时间，但值始终是'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 --你正在尝试的东西可以用这个来完成--

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

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

Answer 2

检查this fiddle

您只需要一个闭包来附加事件

(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

只需运行$('.device').each()，而不是运行for循环。我还添加了一个警报来获取每个div.device的值。

编辑:我是用bind做的，而不是点击，因为这反映了他在普通的JS中是如何做的。如果不是动态添加div.device，pXL使用on的解决方案也能正常工作。