使用 jQuery 重新定位绝对定位的图像答案

【问题标题】：Reposition a absolute positioned image using jQuery使用 jQuery 重新定位绝对定位的图像
【发布时间】：2013-02-15 16:53:27
【问题描述】：

我有一个相对定位的 div 来显示配置文件图标，并且图像将显示在此 div 中。图像是绝对定位的。顶部和左侧确定应该显示哪个部分。显示效果很好，但问题是顶部和编辑图标后使用 ajax 时左侧不会改变。编辑包括增加大小、更改背景等。有一个编辑图标的选项，用户可以在其中选择要显示的部分，编辑图标后我已经存储了宽度、高度、背景、顶部，左侧在数据库中，这将是图标的属性。通过使用 ajax，我从数据库中检索数据并更改了宽度、高度、背景、顶部、左侧。但只有宽度、高度和背景在变化。它只会在重新加载时改变，因为我在页面加载时使用 php 来设置属性。希望你能理解！

我的 jquery 代码：

if(type=="picon")
        {
            $.post("changedDB.php", type, function(data, status){ 
            var spicture=data.split("|");
            $(".profile-picture").attr("src", spicture[0]);
            $(".profile-picture").css({"position":"absolute","width":""+spicture[1],"height":""+spicture[2],"background":""+spicture[3],"top":""+spicture[5],"left":""+spicture[6]});
            });
        }

来自服务器的数据

The value in data is "image url|70|50|rgba(0, 0, 0, 0)|0|-10|-5"
The format corresponds to "image url|width|height|background|show full image|top|left

但顶部和左侧保持不变，它具有我在页面加载时使用 php 设置的值。

如何使用 jquery 更改顶部和左侧？

提前致谢。

【问题讨论】：

你能显示服务器响应的数据是什么吗？
为什么不从您的 PHP 中返回一个 JSON 对象，并为自己保存data.split("|");？此外，""+spicture[5] 没有必要将该值附加到空字符串。
@harikrishnan.n0077 在下面查看我的回复并告诉我它是否有效
@crush 从服务器端检索更新值的唯一方法是使用不加载的 ajax
@harikrishnan.n0077 这与返回 JSON 而不是字符串有什么关系？

标签： jquery image html

【解决方案1】：

您似乎没有指定单位。用“px”连接你的尺寸

将您的代码更改为：

$(".profile-picture").css({"position":"absolute","width":""+spicture[1] + "px","height":""+spicture[2] + "px","background":""+spicture[3],"top":""+spicture[5] + "px","left":""+spicture[6] + "px"});

【讨论】：

或者他可以使用offset()。另外，我认为 jQuery 会为你添加单位，如果你把它们留在css().
px 会自动添加到样式中
使用 JSON 响应会更容易调试。此外，您不需要拆分文本。能否提供相关页面的链接？