0

我想要做的是在现有图像之上附加热点。截至目前，此代码附加了新的 div 和图像，但在图像旁边而不是在图像之上。我是 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

您从 object 获取的属性的串联不正确。您缺少告诉 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 回答