Question

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

我认为submenus[i]不在函数范围内。如何点击元素以便我可以切换它的下一个兄弟？

Answer 1

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

Answer 2

你可以这样做：

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的范围。

Answer 3

它必须如下所示：

  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';
        }
    }

Answer 4

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将是您元素的length：

<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（请查看jsFiddle）。

您必须将i保留在onclick功能中，关闭会对您有所帮助：

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

如您所见，我已经创建了一个函数并立即执行它（使用我称之为j的参数，并且每个元素的值为i）。它的回归，是另一个功能。请检查此jsFiddle。

获取点击元素onclick

4 个答案: