4

mousedown イベントをオブジェクト コレクションに割り当てる必要があります。

しかし、.on() メソッドは、ターンごとにオブジェクトをオーバーライドしているようです。

これは、私のコードにあるものの非常に単純化された例です。

Javascript :

$(document).ready(function() {
    var myArray = {
        0: {"id": "box1", "color": "blue"},
        1: {"id": "box2", "color": "green"}
    };

    for (i in myArray) {
        box = $('div#'+myArray[i]['id']);
        color = myArray[i]['color'];
        box.data('color', color);
        box.on({
            mousedown: function() {
                var color = myArray[i]['color'];
                $(this).css({'background': $(this).data('color')});
                myArray[i]['color'] = (i==0) ? "orange" : "pink";
            }
        });
    }
});

および HTML :

​<div id="container">
    <div id="box1"></div>
    <div id="box2"></div>
</div>

​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​ さらに、ここで実際の動作を見ることができます: http://jsfiddle.net/ae3En/ 6/

誰かが私を助けてくれることを願っています、ありがとう。

4

6 に答える 6

1

box関数で使用しているため（そしてbox外部で定義されているため）。したがって、常に最後にバインドされたボックスを参照します。特に関係ありません.on。これを処理するいくつかの方法ですが、最も簡単な方法は次のとおりです。

mousedown: function () {
   $(this).css(...)
}

編集：なぜそれが変数の最後の色だけを使用するのか完全にはわかりません。を使用して、予想される色をdiv自体にバインドすることで、これを回避することができました.data。このソリューションがあなたのために働くことを願っています：

http://jsfiddle.net/ae3En/5/

于 2012-08-30T22:53:20.187 に答える
1

を使用.eachして配列を反復処理し、それによってすべてのスコープの問題を回避できます。

$.each(myArray, function(i, obj) {
    $('div#'+obj['id']).on({
        mousedown: function() {
            $(this).css({'background': obj['color']});
        }
    });
}
于 2012-08-30T23:13:06.507 に答える
1

コードの小さな変更: この行を置き換えます

box.css({'background': myArray[i]['color']});

に

  $(this).css({'background': myArray[i]['color']});
于 2012-08-30T22:53:26.083 に答える
1

マウスダウン コードは、ループが実行されるまでトリガーされないため、常に最後のオブジェクトを割り当てます。これは機能します: jsFiddle example。

var myArray = {
    "0": { "id": "box0","color": "blue" },
    "1": {"id": "box1", "color": "green" }
};
$('#container div').each(function(i) {
    $(this).on({
        mousedown: function() {
            $(this).css({
                'background': myArray[i]['color']
            });
        }
    })
});​
于 2012-08-30T23:00:18.103 に答える
0

現在のボックス変数をリスナー関数に送信することもできます。

$(document).ready(function() {
    var myArray = {
        "0": {"id": "box1", "color": "blue"},
        "1": {"id": "box2", "color": "green"}
    };
    function listener(box,i)
    {
        box.on({
            mousedown: function() {
                box.css({'background': myArray[i]['color']});
            }
        });
    }
    for (i in myArray) {

        var box  = $('div#'+myArray[i]['id']);
        listener(box,i);

    }
});
于 2012-08-30T23:12:22.623 に答える
0 
$(document).ready(function() {
    var myArray = {
        "0": {"id": "box1", "color": "blue"},
        "1": {"id": "box2", "color": "green"}
    };

    for (i in myArray) {
        var box = $('div#'+myArray[i]['id']);
        var color = myArray[i]['color'];
        box.data('color', color);

        box.on({
            mousedown: function() {
                $(this).css({'background': $(this).data('color')});
            }
        });
    }
});

</p>

デモ

于 2012-08-30T23:21:35.847 に答える