11

要素#elem0 .. #elem9に対してクリックイベントを設定し、それぞれの要素に対応した番号をalertで出したいと思っています。

下記のコードだと、#elem0をクリックしたときには0#elem1をクリックしたら1、といったようにです。しかし、下のコードだと常に10が表示され、上記のような挙動になりません。どうすればいいのでしょうか?

for (var i = 0; i < 10; i++) {
    $('#elem' + i).click(function() {
        alert(i);
    });
}

8 件の回答 8

12

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>

以上です。

1
  • 詳細な回答、ありがとうございます。関数をリターンするより、エレガントかもしれませんね。 Commented 2014年12月13日 4:04
4

引数を使わず以下の様にbindする事もできます。

for (var i = 0; i < 10; i++) {
    $('#elem' + i).click((function() {
        var x=i;
        return function() {
            alert(x);
        }
    })());
}
2

click や setTimeout で実行される関数は実行時に評価されます。ですので値を束縛してやる必要があります。

for (var i = 0; i < 10; i++) {
    (function(i) {
        $('#elem' + i).click(function() {
            alert(i);
        });
    }(i);
}

この方法は即時関数を for ループ毎に定義する事で引数を用いて値を束縛する方法です。 詳しくはこちらをご覧ください。

http://mattn.kaoriya.net/software/lang/javascript/20110523124612.htm

2

bind関数は、bind関数を呼出した時の値をバインドします。 次のように書けます。

for (var i = 0; i < 10; i++) {
    $('#elem' + i).click(
        alert.bind(null, i)
    );
}

bind関数はECMAScript 5で追加されました。 IE9以降のモダンブラウザで使えます。 詳しくは Function.prototype.bind() - JavaScript | MDNをみてください。

1

JSHintを使うとこの種のポカミスを防げるのでおすすめです。 この質問のコードの場合、Don't make functions within a loop. (解説) という警告を出してくれます。

1

ES2015であれば、ブロックスコープである const や let を使うことでも回避できます。例えば下の例では各ループの x は別の変数になりますから、期待通り動作するかと思います。

for (var i = 0; i < 10; i++) {
    let x = i;
    $('#elem' + x).click(function() {
        alert(x);
    });
}

さらに、ループカウンタ変数の宣言に let を使うことでも同じような効果が得られます。

for (let i = 0; i < 10; i++) {
    $('#elem' + i).click(function() {
        alert(i);
    });
}

ただし、他の回答のように click() を呼び出した時点で値を束縛しているわけではありませんから、click() の後に値を変更した場合はそれが反映されることになります。

for (var i = 0; i < 10; i++) {
    let x = i;
    $('#elem' + x).click(function() {
        alert(x); // 常に 12345 が表示される
    });
    x = 12345;
}

参考

0

この場合は下記のように関数を返す関数に引数として渡す事で望む動作が可能です。

for (var i = 0; i < 10; i++) {
    $('#elem' + i).click((function(i) {
        return function() {
            alert(i);
        }
    })(i));
}

理屈ではわかっても、普通の書き方に慣れているとつい油断してしまいます。

0

解答は既に他の人が書いているので、質問の挙動からして補足説明しますと、これは変数のスコープを勘違いしているために起こるものだと思われます。

JavaScriptの仕様だと、通常関数内で定義されていない変数を利用しようとしたさい、それよりも前の変数を参照しようとします。例として、次のようなコードが書けます。

var i = 0;
var a = function () {
    console.log("var i:" + i);
    var b = function () {
        var i = 99;
        var c = function () {
            console.log("var i:" + i);
        };
    c();
    }
    b();
 }

このとき、なんらかのブラウザのJavaScriptコンソールで、a();を実行すると、最初にvar i: 0が出力され、次にvar i: 99が出力されるかと思われます。この理由としては、c()の関数内で一番近いvar iの宣言がb();の中で行われているもので、a()の関数は、その外のvar iが一番近いものだからです。

質問に戻りますと、この場合のclick内で使われているiは、forで使われている値です。そして、forで使われたiは実行が終了したときに、値が10にセットされているわけです。そうすると、click()したときに参照される値は10にセットされたiを見にいくわけですから、全部の出力がiとなるわけです。

そのため、この変数の状態を、なんらかの形で保存しておく必要があるわけですが、このときに利用される手法がクロージャと呼ばれるものです。この実例は他の方が書いている通りなので、この解説では省略します。

この質問に回答するには、ログインする必要があります。

求めていた回答ではありませんか? のタグが付いた他の質問を参照する。