javascript - 用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 属性。

例如试试这个 http://jsfiddle.net/TrueBlueAussie/nhHfj/2/

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

要查看“其他东西”是否正在修改 top，只需在您的代码中将其重命名为另一个名称即可。

更新:

检查 docs对于 window 我看到 top 是一个属性，但 left 不是。这优先于您的 var top，因为您的代码在窗口范围内运行(即 this 是 window)。

解决方案:

当您的代码在 window 范围内运行时，不要使用 top(或 window 的任何其他属性)作为变量的名称:)

如果你的代码在一个函数中，它会工作得很好(这就是为什么所有 JSFiddles 都能工作，因为代码被包装在另一个范围内)。

正确的解决方案:

这一切都意味着您的代码在 jQuery 加载事件之外运行(这是不行的)。

将其更改为:

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

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

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