向函数传递参数

passing arguments to a function

本文关键字：参数 函数      更新时间：2023-09-26

我有一个工作正常的函数:

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

"隐藏/显示"应该放在另一个方向，但如果我交换两个，它停止正常工作。

请通知

给你一把小提琴https://jsfiddle.net/2b3b7kp5/14/

请记住，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"));

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

为了更通用，最好使用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';

"Hide/Show"应该以另一种方式放置，但如果我交换这两个，它停止正常工作

如果你交换，你会设置innerHTML显示，如果它说，每次显示。因此它永远不会改变。

相关文章：