Question

我有一个功能正常（好吧，几乎没问题）：

function clickMe() {
    var evt = new MouseEvent("click", {
        bubbles: true,
        cancelable: true,
        view: window,
    });
    var buttonId = document.getElementById("fib_button")
    h = buttonId.nextSibling;
    h.className = (h.className == 'hidden') ? '' : 'hidden';
    buttonId.innerHTML = (buttonId.innerHTML == 'Show') ? 'Hide' : 'Show';
}

document.getElementById("fib_button").addEventListener('click', clickMe);

现在，我想让它更通用，以便将ID名称传递给函数，这样我就不必在函数体内对其进行硬编码，但它不起作用：

function clickMe(divID) {
    var evt = new MouseEvent("click", {
        bubbles: true,
        cancelable: true,
        view: window,
    });
    var buttonId = document.getElementById(divID)
    h = buttonId.nextSibling;
    h.className = (h.className == 'hidden') ? '' : 'hidden';
    buttonId.innerHTML = (buttonId.innerHTML == 'Show') ? 'Hide' : 'Show';


}

document.getElementById("fib_button").addEventListener('click', clickMe("fib_button");

我遇到的另一个问题是这一行：

buttonId.innerHTML = (buttonId.innerHTML == 'Show') ? 'Hide' : 'Show';

＆＃34;隐藏/显示＆＃34;应该反过来，但如果我交换它们，它就会停止正常工作。

请告知

这是一个小提琴 https://jsfiddle.net/2b3b7kp5/14/

Answer 1

请记住，addEventListener函数正在等待函数，因此clickMe函数应该返回一个函数。在clickMe函数内部，您可以返回一个匿名函数，我们可以访问该范围以及您发送给clickMe的任何参数。

您正在寻找的是这样的：

function clickMe(divID) {
    return function () {
        var evt = new MouseEvent("click", {
            bubbles: true,
            cancelable: true,
            view: window,
        });
        console.log(divID);
        var buttonId = document.getElementById(divID)
        h = buttonId.nextSibling;
        h.className = (h.className == 'hidden') ? '' : 'hidden';
        buttonId.innerHTML = (h.className == 'hidden') ? 'Show' : 'Hide';
    }
}

document.getElementById("fib_button").addEventListener('click', clickMe("fib_button"));

Answer 2

使用匿名函数 function () { return function() {...}} 更新了示例https://jsfiddle.net/2b3b7kp5/25/

Answer 3

更通用，最好使用this。

function clickMe() {  
    h = this.nextSibling;
    h.className = (h.className == 'hidden') ? '' : 'hidden';
    this.innerHTML = (this.innerHTML == 'Show') ? 'Hide' : 'Show';
}

document.getElementById("fib_button").addEventListener('click', clickMe);

然后this将是触发事件的元素。

我遇到的另一个问题是这一行：

buttonId.innerHTML = (buttonId.innerHTML == 'Show') ? 'Hide' : 'Show';

＆＃34;隐藏/显示＆＃34;应该反过来，但如果我交换两个，   它停止正常工作

如果你换掉那么，你会设置innerHTML以显示它是否每次显示。因此它永远不会改变。

javascript - 将参数传递给函数

3 个答案: