使用單擊功能獲取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 。