1

Javascriptコードの一部にリストアイテムの配列があります。それぞれにonclickイベントハンドラーを割り当てたいと思います。各ハンドラーは同じ関数ですが、入力引数が異なります。今私は持っています：

function contentfill(i) {
    box = document.getElementById("text");
    box.style.background="rgba(0,0,0,0.8)";
    var content = new Array();
    contentdivs = document.querySelectorAll("#contentfill>div");
    box.innerHTML = contentdivs[i].innerHTML;
}
li[3].onclick = function() {contentfill(0);};
li[4].onclick = function() {contentfill(1);};
li[5].onclick = function() {contentfill(2);};

これは十分に機能しますが、ループを使用して同じことを実現したいと思います。たとえば、次のようになります。

for(i=3;i<=5;i++) {
    j=i-3;
    li[i].onclick = function() {contentfill(j);};
}

ただし、これは機能しません。jはループの最後で2として定義されているように見えるので、クリックするたびに、contentfill（2）を呼び出すだけのようです。

4

2 に答える 2

3

別のアプローチとして、各要素がどの引数を使用する必要があるかを認識させることを検討してください。

for (var i = 0; i < 3; i++) {
    var el = li[i + 3];
    el.dataset.contentIndex = i;
    el.addEventListener('click', contentfill);
}

もちろん、引数を取る代わりにcontentfill引数を抽出する必要があります。.dataset(これは jQuery の と同じメカニズム$.dataです。)

(a) 大量の小さなラッパーを生成しない、(b) 後で「引数」を調べて変更できる、(c)data-属性を使用してドキュメント内でそれらを事前定義できるため、私はこれを好む傾向があります。 . それらを関数の引数から動作に効果的に変更します。

于 2013-01-15T02:19:00.550 に答える
1

の値はi - 3、クリック ハンドラー関数にバインドする必要があります。クロージャーはこの機能を提供できます。

li[i].onclick = (function(j) {
    return function() {
        contentfill(j);
    }
)(i - 3));

ところで、クリック ハンドラを使用addEventListenerまたは登録することをお勧めします。attachEvent

于 2013-01-15T01:52:29.053 に答える