Question

我正在尝试隐藏类（徽标）中的所有元素，但单击的元素除外。所以我写出来只是为了意识到将参数传递给addEventListener激活的函数是不可能的！这似乎......至少可以说是不灵活的。是否有另一种明显的方式来传递一个我不知情的论点（我对Javascript很新）？

<!DOCTYPE html>
<head>
<link rel="stylesheet" type="text/css" href="index.css">
<title>Sexism in Silicon Valley</title>
</head>
<body id="body1">
<div class="parent">
    <img src="kstartup.png" class="logos" id="id1">
    <img src="uber.png" class="logos" id="id2">
    <img src="kpcb.png" class="logos" id="id3">
    <img id="id4" src="r1startup.png" class="logos">
</div>
<div class="parent" id="parent2">
    <img src="zillow.png" class="logos" id="id5">
    <img src="github.png" class="logos" id="id6">
    <img src="tinde.png" class="logos" id="id7">
    <img src="snapchat.png" class="logos" id="id8">
</div>
<script src="index.js"></script>
</body>

</html>

使用Javascript：

function click(x) {
    for (var i = 0; i < logos.length; i++) {
        if (x !== i) {
        logos[i].style.display = "hidden";
        }
    }

}

var logos = document.getElementsByClassName("logos");
for (var i = 0; i < logos.length; i++) {
    logos[i].addEventListener('click', click(i));
}

Answer 1

您问题的字面答案：

logos[i].addEventListener('click', (function(i) { return function() { click(i); } })(i));

会做你想要的。你需要一个函数来包装click(i)，因为你不想立即执行click(i);并且你需要另一个函数来关闭i，否则你会得到看似奇怪的结果（即总是click(logos.length)）。

您想要做的事情根本就是不使用迭代器。将听众附加到#logos本身;在处理程序中（将获得event参数），迭代其子项并与event.target进行比较。

有没有办法将参数传递给addEventListener？

1 个答案: