0

私がやろうとしているのは、既存の画像の上にホットスポットを追加することです。現在のところ、このコードは新しいdivとimageを追加しますが、画像の上ではなく、画像の横に追加します。私はjavascriptとjqueryを初めて使用するので、助けていただければ幸いです。

//build data structure to store coordinates and content. 
var product_hotspots = new Array();
product_hotspots[0] = {x: 200, y:200, content: "This is test content"}
product_hotspots[1] = {x: 500, y:500, content: "This is more test content"}
product_hotspots[2] = {x: 400, y:400, content: "This is even more test content"}

//loop through each hotspot. 
$(product_hotspots).each(function(idx) {
    //append a new div to #product_image for each hotspot with the following format: 
    var $newdiv1 = $('<div id="bullet" style="position: absolute; top: product_hotspot[idx].x; left: product_hotspot[idx].y" data-content="product_hotspot[idx].content"></div>');
    var $image1 = $('<img src="images/hotspot.png"/>');


    $("#product_image").append($newdiv1,$image1);

});
4

1 に答える 1

1

オブジェクトから取得したプロパティの連結が正しくありません。JavaScript オブジェクトの文字列や値ではないことを JavaScript に伝える引用符がありません

試す

$('<div id="bullet" style="position: absolute; top:'+product_hotspot[idx].x+'px; left:'+product_hotspot[idx].y+'px" data-content="'+product_hotspot[idx].content+'"></div>');

product_hotpsot文字列ではないことを反映する項目の構文の強調表示に注意してください

x注: 内でとyが間違った位置にあると思いますstyle。通常xはありleftませんtop

于 2013-01-19T21:26:02.333 に答える