Javascript 函数中的参数插入导致错误

我想在单击不同按钮时更改某些段落的文本，但我想避免每次编写整个函数时只更改两个文本元素

这是没有参数的代码：

$('.ilBorgo').click(good);
function good() {
    if ($('#page').hasClass('content') === false) {
        $('#page').addClass('content');
        $('.title').text("text1");
        $('.text').text("text2");
        $('#slider').removeAttr("id");
        $('.container').css("background-image", 'url' + imgPath[0]);
    } else {
        $('#page').removeClass('content');
        $('.container').attr("id", "slider");
        $('.title').text("");
        $('.text').text("");
    };
    document.getElementById("demo").innerHTML = "it's running!";
};

$('.ilBorgo').click(good("hello", "world"));

function good(a, b) {
    if ($('#page').hasClass('content') === false) {
        $('#page').addClass('content');
        $('.title').text(a);
        $('.text').text(b);
        $('#slider').removeAttr("id");
        $('.container').css("background-image", 'url' + imgPath[0]);
    } else {
        $('#page').removeClass('content');
        $('.container').attr("id", "slider");
        $('.title').text("");
        $('.text').text("");
    };
    document.getElementById("demo").innerHTML = "it's running!";
};

我的问题是，当我尝试添加参数以使代码看起来更好时，我得到了它，但是在页面加载后，事件没有单击按钮就被触发了

当我点击它时，什么都没有发生，而它应该切换并使文本的div消失

这是带有参数的代码：

$('.ilBorgo').click(good);
function good() {
    if ($('#page').hasClass('content') === false) {
        $('#page').addClass('content');
        $('.title').text("text1");
        $('.text').text("text2");
        $('#slider').removeAttr("id");
        $('.container').css("background-image", 'url' + imgPath[0]);
    } else {
        $('#page').removeClass('content');
        $('.container').attr("id", "slider");
        $('.title').text("");
        $('.text').text("");
    };
    document.getElementById("demo").innerHTML = "it's running!";
};

$('.ilBorgo').click(good("hello", "world"));

function good(a, b) {
    if ($('#page').hasClass('content') === false) {
        $('#page').addClass('content');
        $('.title').text(a);
        $('.text').text(b);
        $('#slider').removeAttr("id");
        $('.container').css("background-image", 'url' + imgPath[0]);
    } else {
        $('#page').removeClass('content');
        $('.container').attr("id", "slider");
        $('.title').text("");
        $('.text').text("");
    };
    document.getElementById("demo").innerHTML = "it's running!";
};

---

将您的单击事件用作

$(".ilBorgo").click({param1: "Hello", param2: "World"}, good);

function good(event){
    alert(event.data.param1);
    alert(event.data.param2);
}

---

这是您在单击事件时向函数传递参数的方式。

您对函数何时执行感到困惑

您的原始代码：

$('.ilBorgo').click(good); // function is executed on click

不算好。它只将函数按值传递给

。单击

但是，您的新代码确实调用了
good
：

不带参数的等效形式为：

$('.ilBorgo').click(good()); // bug easier to see 

看到问题了吗

您想要的是延迟执行，直到实际单击为止

一种简单的方法是在调用周围使用匿名函数：

$('.ilBorgo').click(function () { // .click receives a function
    good("hello", "world");       // good() is only called once we clicked
});

另一种解决方案是让
hello
返回函数：

function good(a, b){
    // don't execute anything here!
    // just make a function that uses a and b!
    return function () {
        if($('#page').hasClass('content')===false){
            $('#page').addClass('content');
            $('.title').text(a);
            $('.text').text(b);
            $('#slider').removeAttr("id");
            $('.container').css("background-image", 'url'+imgPath[0]);
        }else{
            $('#page').removeClass('content');
            $('.container').attr("id","slider");
            $('.title').text("");
            $('.text').text("");
        };
        document.getElementById("demo").innerHTML = "it's running!";
    };
};

当你这么做的时候

 $('.ilBorgo').click(good("hello", "world"));

然后浏览器会在解释好的方法后立即调用它，这就是为什么在页面刷新/加载时调用它的原因。相反，请尝试以下方法：

$(".ilBorgo").click(good.bind(this, "Hello", "World"));

在这种情况下，单击按钮将调用好的方法。你可以检查它是如何工作的
这是构造事件处理程序的典型方法（一个处理点击事件的函数，或者在你点击按钮时运行）。@BobRodes不确定你的意思？是的，它可以工作，但我想对其他按钮重复使用该函数，使用其他参数，我的目标是拥有一个干净且工作正常的代码..好的。另一个解决方案是从
hello
：）返回一个函数。@atul很好地回答了这个问题，但当我尝试用另一个文本字符串（存储在名为text1的变量中）更改字符串hello时，它返回hello字符串，而不是text1字符串，后者包含更多的文本，所以我不能把它放在函数参数中…你为什么要从滑块上删除id？谢谢，你的代码工作得很好！！您能简单地告诉我它是如何工作的吗？函数abc（）{…}//它将作为函数声明在浏览器内存中注册。但是，当浏览器看到abc（）时，它将解释为函数调用，因此会立即调用函数abc。
$（'.ilBorgo'）的情况也是如此也被浏览器解释为函数调用，因此在页面加载时得到调用。相反，
good.bind（这个“Hello”，“World”）
不会立即得到调用，它告诉浏览器在这个上下文中执行good方法，只要在单击按钮时调用它。对不起，我的英语很差：）谢谢，我也不是英国人，但是如果你不介意的话，你能告诉我为什么当我试图用另一个文本字符串（存储在名为text1的变量中）更改字符串“world”时，它会返回hello字符串，而不是text1字符串，因为它包含更多的文本。我不知道问题是因为我将文本存储在[]之间，还是应该以其他方式存储。我无法复制它。如果可能，您可以发布js fiddle链接，显示您正在尝试的方式，这将很容易调试。我想您忘了声明变量text1，我没有看到任何声明，你只是在使用它。