如何在jquery中的onclick中傳遞參數

Question

下面的代碼是在index.html中調用

    <script src="js/jquery/jquery-1.8.2.min.js"></script>
    <script src="js/px.js" type="text/javascript" ></script>
    <script type="text/javascript">
        var newGame = new px1("black");
        new px1Generator(newGame);
    </script>

下面的代碼在px.js中

var px1 = function (color) {
   if (color == "white") {
        this.x = "100";
   } else if (color == "black") {
        this.x = "900";
   }};
var px1Generator= function (px1obj) {
    for (i = 0; i < 10; i++) {
        $("#mainGame").append("<div class='pawn white'></div>");
    }
    //for 10 object upon add onClickEvent
    $(".pawn.white").on("click", function (event, px1obj) {
       alert(px1obj.x)
    });
};

我想發送100或900到onclick功能，怎么做？ 用戶單擊div時錯誤一致

Answer 1

你有兩個問題。 首先，當你立即運行代碼時，你會看到這個錯誤：

未捕獲的TypeError：px1不是構造函數

這是因為您嘗試在函數存在之前對其進行實例化。 您需要先定義函數，或更改為使用顯式函數定義。

其次，問題本身就是因為你已經將px1obj重新定義為click事件處理程序的一個參數，它永遠不會被定義。 這會隱藏px1obj在outser范圍限定。 要解決此問題，只需從事件處理程序中刪除該參數：

 var newGame = new px1("black"); new px1Generator(newGame); function px1(color) { if (color == "white") { this.x = "100"; } else if (color == "black") { this.x = "900"; } }; function px1Generator(px1obj) { for (i = 0; i < 10; i++) { $("#mainGame").append("<div class='pawn white'></div>"); } //for 10 object upon add onClickEvent $(".pawn.white").on("click", function(e) { console.log(px1obj.x) }); }; 

 <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.0/jquery.min.js"></script> <div class="pawn white">pawn white</div> 

Answer 2

您需要從單擊回調函數簽名中刪除px1obj參數，因為您要覆蓋它。

px1obj已存在於px1Generator函數作用域中，並且您將在onclick回調作用域內覆蓋它。

 $(function() { function px1(color) { if (color == "white") { this.x = "100"; } else if (color == "black") { this.x = "900"; }}; function px1Generator(px1obj) { for (i = 0; i < 10; i++) { $("#mainGame").append("<div class='pawn white'>a</div>"); } //for 10 object upon add onClickEvent $(".pawn.white").on("click", function (event) { console.log(px1obj.x) }); }; var a = new px1("black"); px1Generator(a); }); 

 <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script> <div id="mainGame"></div>