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 - 您正在尝试使用此功能 -

$('.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

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

编辑：我使用bind而不是点击进行，因为这反映了他在普通JS中的表现。如果您不动态添加on，使用div.device的pXL解决方案也可以正常工作。

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

3 个答案: