Javascript 在现有图像的顶部附加热点。JS与JQ

我想做的是在现有图像上附加热点。到目前为止，这段代码追加了新的div和image，但是在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);

});

//构建数据结构以存储坐标和内容。
var product_hospots=新数组（）；
product_热点[0]={x:200，y:200，内容：“这是测试内容”}
product_热点[1]={x:500，y:500，内容：“这是更多的测试内容”}
product_热点[2]={x:400，y:400，内容：“这是更多的测试内容”}
//循环通过每个热点。
$（产品热点）。每个（功能（idx）{
//为每个热点的#product_图像添加一个新div，格式如下：
变量$newdiv1=$（''）；
变量$image1=$（''）；
$（“#产品_图像”）.append（$newdiv1，$image1）；
});

从对象获取的属性的连接不正确。您缺少的引号告诉javascript它们不是javascript对象的字符串和值

试一试

<代码>$（''）； 请注意，

product\u hotpsot

项的语法突出显示，反映它们不是字符串

---

注意：我相信您在

样式中的
x
和
y
位置错误。通常
x
是
left
不是
top
没有更多的脚本错误，但是图像仍然不在首先放置在网页上的现有图像的顶部。它们显示在现有图像的侧面。我指的是重叠原始图像。在浏览器控制台中检查元素html和css。html中任何不合适的引号或缺少空格都会导致错误呈现。如果无法在控制台中进行检查，则很难进行故障排除。重叠可能是缺少空间。。我不知道页面或元素看起来像什么。。。刚刚注意到缺少的重要部分。。。。需要在
top
和
left
值之后添加
px
。我以前也做过同样的事。如果没有单位，浏览器不知道如何解释并忽略
顶部
和
左侧
。确保
px
位于字符串部分，没有前导空格。我修改了答案alsovar$newdiv1=$（''）；这是一个新的代码，包含了你要求的所有内容，我仍然得到相同的结果。
$('<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>');