パラメータintruduction in functionエラー

Question

異なるボタンをクリックしたときにいくつかの段落のテキストを変更したいのですが、関数全体が2つのテキスト要素だけを変更するたびに書き込むことは避けたいと思います。

これは、パラメータなしのコードです：

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

は良い呼び出すことはありません。

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

パラメータずに同等のフォームは次のようになります：

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

それだけしかし、あなたの新しいコードがgoodを呼ぶん.click

に値によって機能を渡します問題を参照してください？

あなたが望むのは、実際のクリックまで実行を遅らせることです。

それを行うための簡単な方法は、コールの周りに無名関数を使用することです：

$('.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()の動作を確認できます