4

16 個の ID のセットをループして、eventListenerそれぞれに を割り当てています。PHP ファイルに番号を送信したいのですが (最初の ID は 1、2 番目の ID は 2 など)、それiは私が望むよりも動的なようです。すべてのIDが送信します17。

klasses.forEach(function(klass){
    var svgElement = svgDoc.getElementById(klass); //get the inner element by id
    svgElement.addEventListener("mouseup",function(){
        $.ajax({
            type: "POST",
            url: "buildService.php",
            data: { "service" : i}
        }).done(function(msg){
            alert(lameArray[i]);
            $("#modalSpan").html(msg);
            $("#modmodal").modal();
        });
    });
    i++;
});

それぞれを特定の番号に設定するにはどうすればよいですか? 私も試しました：

var lameArray = [1,2,3,4,5,6,7,8,9,10,11,12,13,14,15,16];
...
data: { "service" : lameArray[i]}
4

3 に答える 3

10

なにi？問題は、それiがグローバル変数であるか、forEachとにかくサイクル外の変数であるため、mouseupイベントがトリガーされると、イベントリスナーが定義されたときの値ではなく、iそのインスタンスの値が使用されることです。

を使用しforEachているため、コールバック関数は実際には 2 番目のパラメーター (カウンター) で呼び出されることに注意してください。したがって、次を使用できます。

klasses.forEach(function(klass, i) {
    ...
});

現在、スコープ内iの変数でありforEach、目的に役立ちます。（forEach3番目のパラメーターでもコールバック関数を呼び出します。これはコレクション自体です-klassesあなたの場合。）

注: jQuery を使用しているため、より「jQuery に似た」スタイルでコーディングする必要があります。したがって、コードを次のように変更します。

$.each(klasses, function(i, klass) {
    $("#" + klass).mouseup(function(){
        $.ajax({
            type: "POST",
            url: "buildService.php",
            data: {service: i + 1}
            ...
        });
    });
});
于 2012-07-11T22:08:10.790 に答える
1

イテレータ インデックスが必要な場合は、forEach を使用しないでください。JQuery の .each は避けてください。ほとんどの場合、まったく不要であり、反復ごとにコールバック関数を起動するため、IE でははるかに遅くなります。while を使用すると、完全に遅延/コンパクトなループを作成できます。

var outerI = klasses.length;

while(outerI--){
    (function(i){
        i+=1;//doesn't affect outerI and you wanted 1-length so we add one.
        //I would personally just add 1 but it also adds clarity to the example

        //crap inside your forEach loop but without the i++
    })(outerI)
}

何が起こっていたか: イベント リスナーに、外部スコープから i を参照するように指示していました。そのイベントが始まったときの私が何であれ、あなたが得たものです。

解決策: i の値を、ローカル変数になる関数のスコープに渡します。括弧を使用したビジネスは、無名関数を 1 ステップで定義、評価、実行するための怠惰な方法です。関数は最初の括弧を介して評価される (実行可能にする) ため、2 番目のセットは、関数定義の内側の 'i' パラメータに入れた引数のようなものです。基本的に新しいローカル変数に渡すことで、必要な値をロックしています。

while ループに関する注意: while(0) は false として評価され、ループが停止します。長さを 1 にするのは、必要な長さよりも 1 少ないため、考えてみるとこれは奇妙です。ただし、while(i--) を使用すると i が評価され、その後 i がデクリメントされるため、ブロック内で length-1 から 0 になるため、配列表記に最適です。他の演算子がヒットする前に i をデクリメントするには、通常は --i を実行しますが、遅延/効率的な while ループでは簡単に機能します。

于 2012-07-11T23:04:27.010 に答える
1

これを試して：

klasses.forEach(function(klass){
    (function(i) {
        var svgElement = svgDoc.getElementById(klass); //get the inner element by id
        svgElement.addEventListener("mouseup",function(){
            $.ajax({
                type: "POST",
                url: "buildService.php",
                data: { "service" : i}
            }).done(function(msg){
                alert(lameArray[i]);
                $("#modalSpan").html(msg);
                $("#modmodal").modal();
            });
        });
    })(i);
    i++;
});
于 2012-07-11T22:07:22.097 に答える