JavaScriptの動的パラメーターを使用した動的onclick関数の割り当て

html javascript
JavaScriptの動的パラメーターを使用した動的onclick関数の割り当て

私はこのコードを持っています:

document.getElementById('img'+i).onclick = function(){popup_show('popup',array_msg[i]+'|||'+date('Y-m-d',strtotime(lec_date))+'-==-'+str_view_forConflict, 'AddEditSchedule;;popup_drag2;;EditSched;;'+String(array_msg_id[3])+';;view', 'popup_drag', 'popup_exit', 'screen-center', 0, 0);};

…​but when I click on the image, the data of array_msg[i] is the last
ループのデータ。つまり、インデックスはループの長さです。 これにはIEを使用します。

これを行う方法についてのアイデアを教えてください。 FFでは、 `setAttribute`を使用しているため正常に動作します。

@bobince

document.getElementById('img'+i).onclick= popup_show.bind(window, 'popup',array_msg[i]+'|||'+date('Y-m-d',strtotime(lec_date))+'-==-'+str_view_forConflict,'AddEditSchedule;;popup_drag2;;EditSched;;'+array_msg_id[3]+';;view','popup_drag', 'popup_exit', 'screen-center', 0, 0    );
                if (!('bind' in Function.prototype)) {
                    Function.prototype.bind= function(owner) {
                        var that= this;
                        var args= Array.prototype.slice.call(arguments, 1);
                        return function() {
                            return that.apply(owner,
                                args.length===0? arguments : arguments.length===0? args :
                                args.concat(Array.prototype.slice.call(arguments, 0))
                            );
                        };
                    };
                }

  1  2


ベストアンサー

closureを使用する必要があります。 ループで実行されるコードだけでなくループコードも提供すると役立ちますが、配列を反復処理する標準の「for」ループがある場合、次のコードが機能するはずです。

for (var i = 0, l = array.length; i < l; i++)
{
    (function(i) {
        document.getElementById("img" + i).addEventListener("click", function() {
            popup_show("popup", array_msg[i] + "|||" + date("Y-m-d", strtotime(lec_date)) + "-==-" + str_view_forConflict, "AddEditSchedule;;popup_drag2;;EditSched;;" + String(array_msg_id[3]) + ";;view", "popup_drag", "popup_exit", "screen-center", 0, 0);
        }, false);
    })(i);
}

また、Firefoxで setAttribute`を使用しないでください。 代わりに、https://developer.mozilla.org/en/DOM/element.onclick [`element.onclick]または、できればhttps://developer.mozilla.org/en/DOM/element.addEventListener [を使用してくださいelement.addEventListener]。これにより、イベントが発生したときに呼び出される複数の関数を追加できるため、他のコードとうまく機能します(2ビットのコードが関数を、たとえば、 `elementのクリックイベントに割り当てる場合)。 onclick = function(){…​ `。その後、2番目の割り当てが最初の割り当てをオーバーライドします。 上記のコード例では、 `element.addEventListener`を使用しました。

2


loop-variable-closureの問題が発生しました。 これは、JavaScriptやPythonなどのクロージャーを持つCスタイル言語では非常によくある落とし穴です。 2番目のクロージャーでループ変数をバインドすることに関するソリューションについては、https://stackoverflow.com/questions/643542/doesnt-javascript-support-closures-with-local-variables [この質問]の受け入れられた回答を参照してください。

ネストが少し少ないソリューションは、 `function.bind()`を使用することです:

for (var i= 0; i

ただし、このメソッドはECMAScript Fifth Editionの機能であり、ほとんどのブラウザーでサポートされていないため、少し助けが必要です—https://stackoverflow.com/questions/748941/setattribute-onclick-and-cross-browser-compatability# 749253 [この回答]下位互換性のある実装。

2


トレビー、これはあなたの答えのクリーンアップ版です。 追加した追加の匿名匿名関数は必要ありません。

for (var i = 0, l = array.length; i < l; i++ ) {
  document.getElementById(i + '05').onclick = (function(tmp) {
    return function() {
      popup_show(
        "popup",
        array_msg[tmp] + '|||' + date('Y-m-d', strtotime(lec_date)) + '-==-' + str_view_forConflict,
        "AddEditSchedule;;popup_drag2;;EditSched;;" + String(array_msg_id[3]) + ";;view",
        "popup_drag", "popup_exit", "screen-center", 0, 0
      );
    };
  })(i);
}

閉鎖の問題を修正するために編集

2


クロージャ JavaScript Closuresを使用する必要があります。 https://stackoverflow.com/questions/1552941/variables-in-anonymous-functions-can-someone-explain-the-following [この質問]への回答が役立つかどうかを確認してください。

1


ワーキングアンサー:

var closures = [];
for (var i = 0; i < array.length; i++){
  closures[i] = (function(tmp) {
        return function() {
        document.getElementById(tmp + '05').onclick = function(){popup_show("popup", array_msg[tmp]+'|||'+date('Y-m-d',strtotime(lec_date))+'-==-'+str_view_forConflict, "AddEditSchedule;;popup_drag2;;EditSched;;"+ String(array_msg_id[3]) +";;view", "popup_drag", "popup_exit", "screen-center", 0, 0)};
        };
})(i);

  closures[i]();
}

Steve Harrisonの回答に感謝します。 私はそれをラップするアイデアを得ました

-1


タイトルとURLをコピーしました