0

我目前正在尝试使用 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 调用。但是，返回的警报仍然是错误的。

4

3 回答 3

2

如果你已经在使用 jQuery - 你正在尝试的可以用这个来完成 -

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

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

于 2013-06-21T20:31:46.633 回答
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);
    }
})();
于 2013-06-21T20:34:53.187 回答
0

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

编辑：我用bind点击而不是点击，因为这反映了他在普通 JS 中的做法。如果on您不动态添加div.device.

于 2013-06-21T20:33:12.690 回答