时间戳

首页 > 解决方案 > 如何让一个函数（f1）运行一个单独的函数（f2），但f2使用“this”参数？

javascript - 如何让一个函数（f1）运行一个单独的函数（f2），但f2使用“this”参数？

问题描述

试图让 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() 函数。

显示的错误是“未捕获的类型错误：无法读取未定义的属性 'classList'。”

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

标签： javascripthtmlcssonclick

解决方案

您需要将 传递this给对overlay(with overlay(this)) 的调用，然后将这个相同的元素传递给menu()with的调用menu(x)：

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>

推荐阅读