5個のボックスに数字の入った簡単なWebページがあります。いずれかのボックスをクリックすると、その中に書かれた番号がポップアップします。しかし、私のために同じ番号がポップアップしています。同じ番号を表示するjavascriptのクリック機能

var main = function() { 
    var nums = [1, 2, 3, 4, 5]; 

    for (var i = 0; i < nums.length; i++) { 
     var num = nums[i]; 
     var box = $("<div>"); 
     box.text(num); 
     box.addClass("container"); 
     box.on('click', function() { 
      alert("you clicked "+num); 
     }); 
     $('body').append(box); 
    } 
}; 

$(document).ready(main);

が、これは私のhtmlファイルである

main.js：

は、ここに私のJavaScriptファイルである

index.htmlを

<!DOCTYPE html> 
<html> 
    <head> 
     <title>clicker</title> 
     <meta charset="UTF-8"> 
     <meta name="viewport" content="width=device-width, initial-scale=1.0"> 
     <link rel="stylesheet" href="style.css"> 
    </head> 
    <body> 

     <script type="text/javascript" src="jquery-1.12.3.min.js"></script> 
     <script type="text/javascript" src="main.js"></script> 
    </body> 
</html>

、これが私のCSSファイルです：

style.cssに

.container{ 
    width:100px; 
    height:100px; 
    background-color: grey; 
    border: 2px ridge yellow; 
}

jsfiddle： https://jsfiddle.net/7evx7urg/

出典

2016-05-16 Rohit

です。これらの内部関数のそれぞれは、それぞれの反復で変化する同じnum変数を指しており、forループの最後に5に等しい。 clickイベントで無名関数が呼び出されると、関数は同じnumを参照します。

問題の解決方法は、クロージャを使用することです。イベントリスナーを追加する瞬間に、numの値を保持する内部スコープを作成する必要があります。ここは解決策は次のとおりです。

main.js：

var main = function() { 
    var nums = [1, 2, 3, 4, 5]; 

    for (var i = 0; i < nums.length; i++) { 
     var num = nums[i]; 
     var box = $("<div>"); 
     box.text(num); 
     box.addClass("container"); 

     box.on('click', (function (number) { 
      return function() { 
       alert("you clicked " + number); 
      }; 
     })(num)); 

     $('body').append(box); 
    } 
}; 

$(document).ready(main);

出典

2016-05-16 15:19:27

一つのアプローチは、forループの外に結合あなたのイベントを移動するには、次のようになります。

$('body').on('click', 'div', function() { 
    alert("you clicked on " + $(this).text()); 
});

私はあなたを動的にクラスを割り当てることをお勧めします過度の数の警告を避けるために、タグを作成し、そのクラスによるターゲティングを行います。

JSFiddle：あなたは、常に同じ番号を取得している理由です、https://jsfiddle.net/yap0o9ge/

出典

2016-05-16 15:01:17 SimianAngel

は、問題は、それが変数numへの参照を持っているということですが、変数に最後に割り当てられた値は5です。ここで

あなたは、内側の関数の外で定義されていますnum変数を警告している正しいコード

var main = function() { 
    var nums = [1, 2, 3, 4, 5]; 

    for (var i = 0; i < nums.length; i++) { 
     var num = nums[i]; 
     var box = getBoxWithNumber(num); 
     $('body').append(box); 
    } 
}; 

var getBoxWithNumber = function(num){ 
       var box = $("<div>"); 
     box.text(num); 
     box.addClass("container"); 
     box.on('click', function() { 
      alert("you clicked "+num); 
     }); 
     return box; 
} 

$(document).ready(main);

出典

2016-05-16 15:01:47 Stevik

同じ番号を表示するjavascriptのクリック機能

main.js： は、ここに私のJavaScriptファイルである

index.htmlを

style.cssに

答えて

関連する問題

main.js：

は、ここに私のJavaScriptファイルである