使用點擊功能獲取div的內容

我目前正在嘗試使用javascript實現一個「按鈕」排序。當用戶點擊div時，div背景應該改變顏色，並且應該彈出列出設備編號。我打算在以後使用該號碼重定向客戶端。但現在，我無法點擊註冊。我的事件正常工作了一段時間，但價值始終是'我'的最終價值。我的網頁中也有JQuery。使用點擊功能獲取div的內容

這是一個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調用。雖然返回的警報仍然是錯誤的。

來源

2013-06-21 jetbomber117

我不相信'document.getElementsByClass'是有效的JS，'getElementsByClassName'是雖然。 –

使用'document.getElementsByClassName（「設備」）' – PSL

哎呀..我很快就想寫出來。 – jetbomber117

如果您已經使用jQuery - 你正在嘗試可以用這個做 -

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

演示相反運行的for循環--->http://jsfiddle.net/G3ADG/8/

來源

2013-06-21 20:31:46

謝謝，這看起來不錯。我怎麼能得到被點擊的div的價值？ – jetbomber117

男人去睡覺... :) +1 – PSL

@ jetbomber117像這樣'$（this）.attr（'value'）''>''http://jsfiddle.net/G3ADG/13/ –

，只需運行$('.device').each()。我還添加了一個警報，以獲得每個div.device的價值。在這裏看到：http://jsfiddle.net/G3ADG/10/

編輯：我做到了與bind而不是上點擊，因爲鏡像他是如何以純JS做。如果您沒有動態添加div.device，pXL使用on的解決方案也同樣適用。

來源

2013-06-21 20:33:12

檢查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); 
    } 
})();

來源

2013-06-21 20:34:53 karthikr

很高興知道！謝謝！ – jetbomber117

使用點擊功能獲取div的內容

回答

相關問題