Question

我正在尝试创建一个照片标记系统，但是我遇到了一个小问题。当我单击添加标签按钮时，标签框不会显示在正确的位置。每当我显示标签时，无论我在照片上的哪个标签，它都会固定在图像的左下角。我已经记录了x＆amp; y坐标，它们是正确的，它只是无法正确显示的框。此外，完全相同的代码在本地运行良好，但在部署时则不行。有什么想法吗？ The link to the 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");
};

Answer 1

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>');

确保在部署代码时加载相关脚本。

jQuery Photo Tag无法正常显示

1 个答案: