Question

我要做的是在现有图像上添加热点。截至目前，此代码附加了新的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);

});

Answer 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

在现有图像上添加热点。 JS和JQ

1 个答案: