Question

我使用jQuery构建了一个网站控件，这是一个包含四个彩色div的长条;用户可以在整个条形范围内拖动两个div之间的连接以调整其大小（整体条形宽度不会更改）。此外，用户可以删除/替换任何div，但必须留在那里。

在我的计算机上进行调试时，它运行正常。现在我托管它并发现jQuery报告的一些值不一致 - 特别是element.css('left')和element.width()。当我设置要输出到控制台的值并重复刷新页面时，我看到有时从没有设置的元素中读取left会返回NaN，有时为0.我通过检查来克服这个问题。为它而且明确地将其设为0。

另一个是width。我有一个div包装内部divs，确定滑块的固定宽度 - 目前设置为1000px。这是在一个css样式表中设置的，该样式表链接在之后 js文件。在页面加载代码中（在 $(function(){})中）查询此宽度值，有时报告1000px，但有时会报告1887px ??这似乎没有押韵或理由 - 我的假设是它是一个竞争条件，在渲染引擎设置之前读取宽度？有人可以确认/否认这一点，或者指出我在DOM中提供对象/属性的顺序的摘要吗？我曾想过将代码放在$（function（））中，文档将全部加载......

You can see the widget here

PS：如果有人想要在其他地方使用小部件代码的副本，请告诉我，很高兴提供： - ）

编辑：还有一项附加功能，如果您单击拖动并滚动鼠标滚轮，它会向上和向下轻推屏障，以便进行精细控制。我刚刚发现，它不会报告正确的数字而不会移动，只显示NaN。在我的本地网络上，这工作正常（与托管的文件相同，但通过网络而不是互联网提供）。由于某种原因，解析该值的行只返回NaN：parseFloat($('#ICDM').children('.slider').children('.b1').attr('data-high'))

我无法理解为什么它会在网络上解析它而不是通过互联网！有没有人有解决方案或替代方案？

Answer 1

我认为你混淆了css属性和DOM对象属性。没有“left”的CSS值并不意味着box元素没有“left”属性。换句话说：

下式给出：

<div>Auto Box</div>

CSS property "left": undefined (or NaN if you parse it)

Box property "div.left": some value according to layout and position on screen.

与宽度，高度等相同。

将css属性“left”设置为某个值将强制该位置，实际上您将不再拥有NaN，但这并不一定意味着该元素实际上将位于“那个位置”因为这取决于css position属性值等等......

Answer 2

好的，我已经找到了我的问题的部分答案：

宽度不一致

我发现在$(document).ready()函数期间将div宽度打印到控制台时报告了不正确的宽度（有时），但是计时器上的函数总是报告正确 - 所以这毕竟是竞争条件！将初始绘图函数放在$(window).load()中解决问题是通过延迟直到所有内容都已加载并最初渲染（我想！）。

如果/当我解决其他问题时，我会用更多细节更新这个！

jQuery不一致的值

2 个答案: