0

我正在尝试创建一个照片标记系统，但是我遇到了一个小问题。当我单击添加标签按钮时，标签框没有显示在正确的位置。每次我显示标签时，它都会固定在图像的左下角，无论我在照片上的哪个位置添加标签。我已经记录了 x & y 坐标，它们是正确的，只是没有正确显示的框。此外，完全相同的代码在本地运行良好，但在我部署时却不行。有什么想法吗？jsfiddle 的链接

var addTag = function(){
    var position = $('#mapper').position();
    var pos_x = position.left;
    var pos_y = position.top;
    var pos_width = $('#mapper').width();
    var pos_height = $('#mapper').height();


    $('#planetmap').append('<div class="tagged"  style="width:'+pos_width+';height:'+
        pos_height+';left:'+pos_x+';top:'+pos_y+';" ><div   class="tagged_box" style="width:'+pos_width+';height:'+
        pos_height+';display:none;" ></div><div class="tagged_title" style="top:'+(pos_height+5)+';display:none;" >'+
        $("#title").val()+'</div></div>')


    $("#mapper").hide();
    $("#title").val('');
    $("#form_panel").hide();


};

var showTags = function(){
    $(".tagged_box").css("display","block");
    $(".tagged").css("border","5px solid #EEE");
    $(".tagged_title").css("display","block");
};
4

1 回答 1

0

CSS 要求您在引用大小和位置时定义单位，否则它会丢弃它。您需要在位置值之后包含“px”。

$('#planetmap').append('<div class="tagged"  style="width:'+pos_width+'px;height:'+
            pos_height+'px;left:'+pos_x+'px;top:'+pos_y+'px;" ><div   class="tagged_box" style="width:'+pos_width+'px;height:'+
            pos_height+'px;display:none;" ></div><div class="tagged_title" style="top:'+(pos_height+5)+'px;display:none;" >'+
            $("#title").val()+'</div></div>');

确保在部署代码时加载依赖脚本。

于 2013-07-10T17:31:19.807 回答