关于javascript：获取点击元素onclick


Get clicked element onclick

本问题已经有最佳答案，请猛点这里访问。
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
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]不在函数范围内。 如何点击元素以便我可以切换它的下一个兄弟？

相关讨论

1
2
3
4
5
6
7
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

相关讨论

1
2
3
4
5
6
7
8
9
10
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：

1
2
3
4
5
6
Hello
Hello
Hello
Hello
Hello
Hello

并使用您的代码：

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

你会在每个元素上获得i i(检查jsFiddle)。

你必须在onclick函数中保留i，闭包将帮助你：

1
2
3
4
5
6
7
for (var i = 0; i < submenus.length; i++) {
    submenus[i].onclick = (function(j) {
        return function () {
            alert(j);
        };
    })(i);
}

如你所见，我已经创建了一个函数并立即执行它(使用一个名为j的参数，每个元素的值为i)。
它的回归，是另一个功能。
检查这个jsFiddle。

它必须如下所示：

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
  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';
        }
    }

你可以这样做 ：

1
2
3
4
5
6
7
8
9
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的范围。