Question

我创建了一个函数来打开和关闭具有特定id的元素的类。它的工作方式与html中的onclick一样：

HTML：

<a href="#menu" class="menutoggle" onclick="toggle(className);">
  <h2id="menubutton">Menu</h2>
</a>
<ul id="menutoggle" class="hidden">

JavaScript的：

var toggle = function (className) {
  var toggleclass = document.getElementById(className); // identify element to change
    if (toggleclass.className === "hidden") { // if class = hidden
        toggleclass.className = "shown"; // change to shown
    }
    else { //if not hidden
        toggleclass.className = "hidden"; // change to hidden
    }
};

但是，如果我尝试将该功能与eventlistner一起使用，那我就不幸了：

HTML：

<a href="#menu" class="menutoggle">
  <h2 id="menubutton">Menu</h2>
</a>
<ul id="menutoggle" class="hidden">

JavaScript的：

var toggle = function (className) {
    var toggleclass = document.getElementById(className); // identify element to change
    if (toggleclass.className === "hidden") { // if class = hidden
        toggleclass.className = "shown"; // change to shown
    }
    else { //if not hidden
        toggleclass.className = "hidden"; // change to hidden
    }
};

var tog = document.getElementsByClassName("menutoggle")[0];
tog.addEventListener("click", toggle(className), false);

我无法弄清楚我做错了什么。非常感谢您的帮助：）

Answer 1

addEventListener的第二个参数需要是函数。

你没有传递它的功能。您正在调用toggle函数并传递其返回值。由于toggle没有return语句，因此该值为undefined。

如果您想使用特定参数致电toggle，可以bind。

tog.addEventListener(
    "click", 
    toggle.bind(this, className),
    false);

将this替换为您希望this的值位于函数内的任何内容（因为您不使用this，因此无关紧要）。

确保您定义className，如果问题中的代码，则不会在任何地方。

如果您需要支持IE8或更早版本，那么您可以创建新功能而不是使用bind：

tog.addEventListener(
    "click", 
    function () { toggle(className) },
    false);

函数与onClick一起使用但不使用eventlistener

1 个答案: