javascript - ループ内のJavascriptを使用して画像にondblclickを追加するには?

Question

重複の可能性:
Javascript ループ内のイベント ハンドラー - クロージャーが必要ですか?

for i = 1 to 5
{
 var el = document.createElement('img');
 el.ondblclick = somefunction();
 mydiv.appendChild(el);
}

el.ondblclick = somefunction('test'); のようです。挿入は行いません。

私は私ができることを知っています..

el.ondblclick= function() { somefunction('test') };

..しかし、それはループでは機能しません!

Answer 1

構文が間違っています。

for (var i = 1; i <= 5; i++) // initialization, condition, loop step
{
    var el = document.createElement('img');
    // you do not want to call `somefunction`, but refer to it:
    el.ondblclick = somefunction;
    mydiv.appendChild(el);
}

i問題が、コールバック関数内で使用したい場合：

for (var i = 1; i <= 5; i++)
{
    var el = document.createElement('img');
    el.ondblclick = (function(i) { // bind i
        return function() { // return closure
            toggleClass('svg_container_' + i);
        };
    })(i);
    mydiv.appendChild(el);
}

Cf

• JavaScriptでループを作成するにはどうすればよいですか？
• JavaScript：addEventListenerとは何ですか？
• JavaScriptクロージャはどのように機能しますか？

Answer 2

これが最終的なコードです。人々が実用的な例を投稿しないとき、私は個人的に嫌いです

        var sCurMonthId = sMonthId.substr(4, 2);
        var cellRight = oCurRow.insertCell(-1);
        cellRight.colSpan = iNumCells;
        for (svg = 1; svg < iNumCells; svg++)
        {
            var div = document.createElement('div');
            div.className = 'svg_container';
            div.id = 'svg_container_'+svg+'_'+sMonthId;
            cellRight.appendChild(div);
            var el = document.createElement('img');
            el.style.width = svg == 5 ? '99.5%' : '49%';
            el.className = 'svg_chart';
            el.style.cssFloat = svg%2 == 0 ? 'right' : 'left';
            el.ondblclick = (function(svg) {
                return function() {
                    toggleClass('svg_container_'+svg+'_'+sMonthId, 'svg_container', 'svg_expanded');
            };
    })(svg);
            el.src = 'mySite.tld';
            div.appendChild(el);
        }