flied onionさんも、Taizan Yonetujiさんも正解を書かれていると思います。
ここでは後から回答を読まれる方のために少し説明を書きます。
問題が発生する理由
問題のコードでは、どのエレメントをクリックしても、alert文が出力するのは"10"です。
これはJavaScriptのクロージャの仕様によるものです。
単純な例を挙げます:
var msg = "foo";
$('#btn').click(function() {
alert(msg); // => "bar"
});
msg = "bar";
DEMO :
var s = "foo";
$('#btn').click(function() {
alert(s);
});
s = "bar";
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<input type="button" id="btn" value="click me">
この例でalert文が出力するのは、"foo"ではなく"bar"になります。
click()
のハンドラ関数がバインドされて実行された時には、変数msg
の値が"bar"になっているからです。
即時関数を使った解決法
解決法のひとつは即時関数を使うものです。即時関数はその名の通り即時に実行されるので、即時関数の中でvar
を使って新規に変数を定義すると、その変数の値は即時関数が定義された時(=実行された時)のものになります。
var msg = "foo";
(function(){
var s = msg;
$('#btn').click(function() {
alert(s); // => "foo"
});
})();
msg = "bar";
DEMO :
var msg = "foo";
(function(){
var s = msg;
$('#btn').click(function() {
alert(s);
});
})();
msg = "bar";
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<input type="button" id="btn" value="click me">
即時関数には引数を渡すこともできるので、同じ内容を以下のように書くこともできます。
var msg = "foo";
(function(s){
$('#btn').click(function() {
alert(s); //=> "foo"
});
})(msg);
msg = "bar";
DEMO :
var msg = "foo";
(function(s){
$('#btn').click(function() {
alert(s);
});
})(msg);
msg = "bar";
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<input type="button" id="btn" value="click me">
forループの問題への回答例
前置きの説明が長くなりましたが、forループの問題は以下のように書くことで解決できます。
for (var i = 0; i < 10; i++) {
(function (n) {
$("#elem" + i).click(function(){
alert(n);
});
})(i);
}
DEMO :
for (var i = 0; i < 10; i++) {
(function (n) {
$("#elem" + i).click(function(){
alert(n);
});
})(i);
}
div {
width:100px;
border:1px gray solid;
padding:0.5em;
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div id="elem0">0</div>
<div id="elem1">1</div>
<div id="elem2">2</div>
<div id="elem3">3</div>
<div id="elem4">4</div>
<div id="elem5">5</div>
<div id="elem6">6</div>
<div id="elem7">7</div>
<div id="elem8">8</div>
<div id="elem9">9</div>
即時関数を使わないやりかた
また、即時関数を使うことが難しい局面では、以下のようにjQueryのdata()
関数が役に立つ場合もあります。
for (var i = 1; i < 10; i++) {
$("#elm" + i).data("n",i).click(function () {
alert($(this).data('n'))
});
}
DEMO :
for (var i = 0; i < 10; i++) {
$("#elm" + i).data("n", i).click(function() {
alert($(this).data('n'));
});
}
div {
width: 100px;
border: 1px gray solid;
padding: 0.5em;
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div id="elm0">0</div>
<div id="elm1">1</div>
<div id="elm2">2</div>
<div id="elm3">3</div>
<div id="elm4">4</div>
<div id="elm5">5</div>
<div id="elm5">6</div>
<div id="elm7">7</div>
<div id="elm8">8</div>
<div id="elm">9</div>
以上です。