javascript - 座標に基づいて画像上に画像を表示する

Question

すでに配列に追加したcssの位置に基づいて、マップ上に1つずつドットを追加しています。

var postop =[{'top':'23'},{'top':'84'},{'top':'54'},{'top':'76'},{'top':'103'}];
var posleft =[{'left':'23'},{'left':'34'},{'left':'34'},{'left':'56'},{'left':'103'}];

しかし、座標に基づいてマップ上にドットを1つずつ追加したいと思います。

var coordsx =[{'x':'155'},{'x':'338'},{'x':'236'},{'x':'196'},{'x':'171'}];    
var coordsy =[{'y':'238'},{'y':'328'},{'y':'488'},{'y':'164'},{'y':'439'}];

ここで試してみました

私のスクリプトはここにあります：

var position = 0;
var postop =[{'top':'23'},{'top':'84'},{'top':'54'},{'top':'76'},{'top':'103'}];
var posleft =[{'left':'23'},{'left':'34'},{'left':'34'},{'left':'56'},{'left':'103'}];

$(postop).each(function(i){
var dots=$('<img src="http://i.imgur.com/iAfzQ.jpg" />');
        dots.css('position','absolute');
        dots.offset({ top: postop[position].top, left: posleft[position].left });           
        $("#overlay-dots").append(dots);
        position++;
        i++;
});​

Answer 1

座標を配列の配列に入れます。また、変数をインクリメントする必要はありません。jqueryeachがそれを行うからです。単純化されたコードは次のようになります。

var coords = [[23, 23], [34, 84], [34, 54], [56, 76], [103, 103]];

$(coords).each(function(i){
    var pos = this;
    var dot = $('<img src="http://i.imgur.com/iAfzQ.jpg" />');
    dot.css({
        position: 'absolute',
        left: pos[0] + "px",
        top: pos[1] + "px"
    });
    $("#overlay-dots").append(dot);
});​