Question

当我点击不同的按钮时，我想更改某个段落的文本，但我想避免每次整个函数只更改两个文本元素时写入。

这是没有参数的代码：

$('.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!";
};

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

当我点击它时没有任何反应，而它应该切换并消失文本的div。

这是带参数的代码：

$('.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!";
};

Answer 1

您对执行此功能的时间感到困惑。

您的原始代码：

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

不会打电话给好人。它只将函数按值传递给.click

但是，您的新代码会调用good ：

$('.ilBorgo').click(good("hello", "world")); // function is executed HERE
                                             // and return value is passed to click.

没有参数的等效形式将是：

$('.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!"; }; };

Answer 2

当你这样做时

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

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

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

在这种情况下，好的方法将在按钮点击时调用。你可以查看.bind()的工作原理

Answer 3

将您的点击事件用作

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

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

这是在click事件中将参数传递给函数的方法。

函数中的参数介绍给出了错误

3 个答案: