参数intruduction在函数中给出错误

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({param1: "Hello", param2: "World"}, good); 

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

这是你传递的参数上点击事件的函数的方式。

Answer 2

你对函数何时执行感到困惑。

您的原始代码：

$('.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 3

当你做到这一点

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

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

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

在这种情况下，好方法将获得按钮点击调用。你可以检查如何工作.bind()