獲取點擊的元素的onclick

var submenus = document.getElementsByClassName("submenu"); 
for (var i = 0; i < submenus.length; i++) { 
    submenus[i].onclick = function() { 
     toggle(submenus[i].nextSibling); 
     return false; 
    } 
} 

function toggle(el) { 
    if (el.style.display == 'block') { 
     el.style.display = 'none'; 
    } else { 
     el.style.display = 'block'; 
    } 
}

導致錯誤：TypeError: submenus[i] is undefined獲取點擊的元素的onclick

我認爲submenus[i]是不是在函數的範圍。我如何獲得單擊的元素，以便我可以切換它的下一個兄弟？

來源

2013-06-03 Computer User

是什麼讓你覺得'submenus'是一個數組？ –

你可以設置一個小提琴 –

你的問題不在'submenus'中，它的索引與所有處理程序的'submenus.length'相等。請參閱@ jbabey的鏈接。 –

你可以這樣做：

var submenus = document.getElementsByClassName("submenu"); 
for (var i = 0; i < submenus.length; i++) { 
    (function(e){ 
     submenus[i].onclick = function() { 
     toggle(e); 
     return false; 
     } 
    })(submenus[i].nextSibling); 
}

將立即打電話函數創建其中submenus[i].nextSibling保持在一個範圍之內。

來源

2013-06-03 13:13:25

var submenus = document.getElementsByClassName("submenu"); 
for (var i = 0; i < submenus.length; i++) { 
    submenus[i].onclick = function() { 
     toggle(this.nextSibling); 
     return false; 
    } 
}

在這樣的事件處理程序中，this關鍵字綁定到觸發事件的元素。因此，在您的示例中，您可以使用this來引用您的子菜單項，從而引用其兄弟。

欲瞭解更多信息，請參見鏈接@FelixKling提供：http://quirksmode.org/js/this.html

來源

2013-06-03 13:13:49 Sirko

呃...這更簡單，我做了... +1 –

雖然有些解釋可能會有用。 http://quirksmode.org/js/this.html。 –

它看起來像這樣：

var submenus = document.getElementsByClassName("submenu"); 
    for (var i = 0; i < submenus.length; i++) { 
     (function(i){ 
      submenus[i].onclick = function() { 
       toggle(submenus[i].nextSibling); 
       return false; 
      }; 
     })(i); 
    } 

    function toggle(el) { 
     if (el.style.display == 'block') { 
      el.style.display = 'none'; 
     } else { 
      el.style.display = 'block'; 
     } 
    }

來源

2013-06-03 13:15:11 sjkm

var submenus = document.getElementsByClassName("submenu"); 
for (var i = 0; i < submenus.length; i++) { 
    submenus[i].onclick = (function(j) { 
     return function() { 
      // alert(j); 
      toggle(submenus[j].nextSibling); 
      return false; 
     }; 
    })(i); 
}

因爲onclick功能將您的for循環後着火，所以每當用戶點擊所需元素上的時，i將爲你的元素210：

<div class="submenu">Hello</div> 
<div class="submenu">Hello</div> 
<div class="submenu">Hello</div> 
<div class="submenu">Hello</div> 
<div class="submenu">Hello</div> 
<div class="submenu">Hello</div>

並與您的代碼：

var submenus = document.getElementsByClassName("submenu"); 
for (var i = 0; i < submenus.length; i++) { 
    submenus[i].onclick = function() { 
     alert(i); 
    } 
}

你的每一個元素（檢查）上獲得6爲i。

你必須保持i的onclick功能，瓶蓋內將幫助您：

for (var i = 0; i < submenus.length; i++) { 
    submenus[i].onclick = (function(j) { 
     return function() { 
      alert(j); 
     }; 
    })(i); 
}

正如你看到的，我創建了一個功能，並立即執行（有一個參數，我把它叫做j，它的值，每個元素是i）。它的返回是另一個功能。檢查這個jsFiddle。

來源

2013-06-03 13:15:18

獲取點擊的元素的onclick

回答

相關問題