javascript - 获取点击元素onclick

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之后触发，所以每当用户点击想要的元素时，你的元素将是：forilength

<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。