使用jquery进行Div定位

Question

我有一些div我通过jquery定义的位置：

    var top=61;
    var left=255;
$("#number_"+ticketValues[0]).css("position","absolute");
$("#number_"+ticketValues[0]).css("top","60px");
$("#number_"+ticketValues[0]).css("left",left+"px");

此代码成功创建了这样的div：

<div id="number_2344" style="position: absolute; top: 60px; left: 255px;">2344</div>

但是当我把它改成

时

$("#number_"+ticketValues[0]).css("top",top+"px");

由于某种原因它是这样的：

<div id="number_2344" style="position: absolute; left: 255px;">2344</div>

如何动态添加最高价？

Answer 1

您的代码显示正确，除非其他内容正在修改top。

注意：jQuery不需要+“px”，因为css方法会自动将其添加到数字中。

如果使用带有对象的css方法，也可以组合多个CSS属性。

e.g。试试这个http://jsfiddle.net/TrueBlueAussie/nhHfj/2/

var top = 61;
var left = 255;
$("#number").css({position: "absolute", top: top, left: left});

要查看“其他内容”是否正在修改top，只需将其重命名为代码中的其他名称即可。

更新

检查window top我看到left是属性，但var top不是。由于您的代码在窗口范围内运行（即this为window），因此优先于top。

解决方案：

当您的代码在window范围内运行时，请勿使用window（或$(function(){ var top = 61; var left = 255; $("#number").css({position: "absolute", top: top, left: left}); }); 的任何其他属性）作为变量的名称：）

如果你的代码已经在一个函数中，它就可以正常工作（这就是为什么所有的JSFiddles都可以工作，因为代码包装在另一个范围内）。

正确的解决方案：

这一切都意味着你的代码在jQuery加载事件之外运行（这是不可的）。

将其更改为：

$(function(){...});

将在另一个范围内运行它并避免命名问题。加载事件处理还意味着在代码运行之前DOM已完全加载。

注意：$(document).ready(function(){...});只是{{1}}

的简写