javascript - 如何使函数 (f1) 运行单独的函数 (f2)，但 f2 使用 "this"参数？

Question

尝试让 onclick 函数运行另一个函数，但 f2 使用 this，我认为这就是问题所在。

我已经尝试将 this 设置为覆盖层 f、覆盖层 f 内的菜单 f、onclick 菜单和覆盖层 f 调用者。我的 js 知识很少，而且可能有一个简单的修复方法，我只是不知道该怎么做。

-------html--------

<div class="eye" onclick="menu(this)">...</div>
<div class="overlay" id=overlay onclick="overlay()">...</div>

------javascript------

function menu(x) {
  x.classList.toggle("change");
  var overlay = document.getElementById("overlay");
  overlay.classList.toggle("show");
}

function overlay() {
  menu();
}

我的目标是能够点击#overlay 并运行 menu() 函数。

出现的错误是“Uncaught TypeError: Cannot read property 'classList' of undefined.”

这是有道理的，因为它认为“this”来自#overlay div，而不是.eye div。我如何让它与 .eye div 对话？

Answer 1

您需要将 this 传递给对 overlay 的调用(使用 overlay(this))，然后传递同样的通过 menu(x) 调用 menu() 元素:

function menu(x) {
  x.classList.toggle("change");
  var overlay = document.getElementById("overlay");
  overlay.classList.toggle("show");
}

function overlay(x) {
  menu(x);
}

<div class="eye" onclick="menu(this)">...</div>
<div class="overlay" id=overlay onclick="overlay(this)">...</div>

话虽如此，您可以直接调用 menu(x)，因为从 .overlay 调用时，this 将引用 .overlay 而不是菜单，overlay() 没有额外的功能:

<div class="overlay" id=overlay onclick="menu(this)">...</div>