javascript - 将参数传递给函数

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';

“隐藏/显示”应该反过来，但如果我交换两者，它就会停止正常工作。

请指教

这是一个 fiddle 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"));