7

重複の可能性:
for ループでクリック ハンドラーを割り当てる

コード内のループについて助けが必要です。

配列をループして、クリックを div に追加します。ただし、常にループの最後のサイクルに onclicks を追加し、その前のものを効果的にキャンセルします。

だから私はこれを私のループとして持っています:

    start = 0;

for(i = start; i < (start+8); i++){ //8 per page
    if(i == array.length){ 
        break;  //page end
    } else {
        (function(i){
             document.getElementById('cell'+i).onclick = function(){ select(i); }
        })(i);  
    }
}

ここで発生するのは、div idcell7はクリック時に追加されますが、 div id は追加さcell0れcell6ません。i私はそれがループ内で変化するという事実と関係があると推測しているのでi、関数内でも影響を受けますか?

この問題を解決するにはどうすればよいですか?

4

3 に答える 3

4

あなたは近いです：

(function(i){
    document.getElementById('cell' + i).onclick = function(){ select(i); }
})(i);

あなたが望むのは次のとおりだと思います：

document.getElementById('cell'+i).onclick = (function(i){
    return function(){ select(i); }
})(i);

また、あなたが持っているので：

for(i = start; i < (start+8); i++)

iは宣言されていないため、グローバルになります。'i' を宣言してローカルに保持します (これが関数コードであると仮定します)。

for (var i = start; i < (start+8); i++)

それがグローバルコードである場合、違いはありません（ただし、とにかく宣言します）。

編集

上記は問題を解決するものではなく、構文を変更するだけです。

次の「機能」は私にとっては機能します.cell0からcell7はリスナーを取得しますが、残りは取得しません。select正しい値が表示されます (クリックした値に応じて 0 ～ 7)。

<script>
    function addListener() {
      var start = 0;
      for(i = start; i < (start+8); i++){ 
        document.getElementById('cell'+i).onclick = (function(i){
            return function(){ select(i); }
        })(i);  
      }
    }
    function select(arg) {
      alert(arg);
    }
    window.onload = addListener;
</script>

<p id="cell0">0</p>
<p id="cell1">1</p>
<p id="cell2">2</p>
<p id="cell3">3</p>
<p id="cell4">4</p>
<p id="cell5">5</p>
<p id="cell6">6</p>
<p id="cell7">7</p>
<p id="cell8">8</p>
<p id="cell9">9</p>
于 2012-10-09T03:45:46.537 に答える
2

この例を試してください。HTMLElement id が 1 から始まると仮定すると、var i = 1 になります。状況を反映するように変更します。

var select = function(i) {
    console.log(i);
};

var arr = ["1", "2", 3, 4, 5, 6];

var start = 0;
var max = 8;

for (var i=1; i<(start + max); i++) {
    if (i === arr.length) {
        break;
    } else {
        (function(i) {
            var element = document.getElementById(['cell', i].join(''));
            element.onclick = function() {
                 select(i);  
            };
        })(i);
    }
}

ただし、外部関数を呼び出す方がより高速な実装になるはずです。

于 2012-10-09T03:59:06.237 に答える
1

理由はわかりませんが、これらの提案は私の問題を解決しませんでした-しかし、ループ中にdivを表示するときにonclicksに追加することで回避する方法を見つけることができたので、最終的には次のようにしました:

innerHTML = '<Div onclick="">'; //etc etc

出力に div を追加する代わりに、後で onclicks を割り当てます。

于 2012-10-09T04:12:16.997 に答える