Question

我的代码有问题，想要测量我的ul的总宽度并检查它是否小于窗口宽度它没有显示溢出：滚动，如果它大于窗口宽度只是隐藏li（s）下的滚动。
每个li的宽度为120px，边距为：0 2px;这就是为什么我使用120和4来总结.ulcontainmatrix的总宽度

我的问题是：当我在浏览器控制台中使用它并推送运行代码时代码正常工作，但在窗口加载时我的代码无效！

我的CSS

.flighmatrixmain{
    overflow-x:scroll; 
    margin-bottom:20px;
}

我的HTML

<div class="flighmatrixmain"> 
   <ul class="ulcontainmatrix"> 
     <li>1</li>
     <li>2</li>
     <li>3</li>
     <li>4</li>
     <li>5</li>
      ...
    </ul>
</div>

我的JS

var ULwidth = $(".flighmatrixmain ul li").length * 120 + $(".flighmatrixmain ul li)").length * 4;
$(".flighmatrixmain .ulcontainmatrix").width(ULwidth);

if ($(".flighmatrixmain ul li:not(ul.lines li)").length * 120 < $('.flighmatrixmain').width()) {
    $('.flighmatrixmain').css('overflow', 'hidden');
}

Answer 1

您可能希望将jQuery代码包装在“就绪”事件中。

执行此操作将确保其中的javascript代码仅在加载文档后执行（因此文档中存在可能涉及您的javascript代码的所有元素）

$(document).ready(function(){

    // your code

});

请参阅：https://jsfiddle.net/u9k2c72h

另一种方法是将你的javascript移动到body标签的底部，但不建议这样做（作为旁注：如果可能的话，最好将javascript文件加载到文档的底部）。 / p>

对其发生原因的简短解释

在某些情况下，您的javascript代码可能会在HTML中的某些元素添加并可供使用（文档呈现过程）之前执行，因此如果您有一些jQuery代码打算使用或操作元素，尚未提供 - 您的代码将无法正常工作（通常不会发出任何错误并让您疑惑“为什么它不起作用？”）

所以最简单的方法是在文档中插入元素的位置之后插入javascript（通常在文档的末尾，就在</body>标记之前，所以理论上要添加元素在浏览器读取javascript并执行之前。

更好的方法是使用$(document).ready(function(){ });并将任何可靠的javascript代码（以及任何其他文档加载的相关代码）包装在其中，这样更可靠，并且还具有能够定位您的优势javascript在HTML中的各个位置并保持相同的效果。

如果你不喜欢jQuery，可以使用类似：

之类的东西使用vanilla javascript

document.addEventListener( "DOMContentLoaded", function(){

    // code code

}, false );

（请记住，DOMContentLoaded比jQuery的ready事件更严格，因为DOMContentLoaded实际上等待页面中的所有内容都被加载 - 包括样式，脚本等。）

希望它有所帮助

Answer 2

提出问题，我必须说你是正确的90％，，但需要进行一些更改。

我把你的css更改为：

.flighmatrixmain{
    overflow-x:auto;
    overflow-y:hidden;
    margin-bottom:20px;
}

以及对jquery代码的一些更改：

$(function(){
var ULwidth = $(".flighmatrixmain ul li").length * 120 + $(".flighmatrixmain ul li)").length * 4;
$(".flighmatrixmain .ulcontainmatrix").width(ULwidth);

// just remove these lines
//if ($(".flighmatrixmain ul li:not(ul.lines li)").length * 120 < $('.flighmatrixmain').width()) {
    //$('.flighmatrixmain').css('overflow', 'hidden');
//}

}

一切正常。

Answer 3

将您的代码放在$(document).ready事件处理程序中，如下所示：

$(document).ready(function(){
  var ULwidth = $(".flighmatrixmain ul li").length * 120 + $(".flighmatrixmain ul li)").length * 4;
  $(".flighmatrixmain .ulcontainmatrix").width(ULwidth);

  if ($(".flighmatrixmain ul li:not(ul.lines li)").length * 120 < $('.flighmatrixmain').width()) {
    $('.flighmatrixmain').css('overflow', 'hidden');
  }
});

为什么jquery代码在我的项目中不起作用

3 个答案: