javascript - 为什么 jquery 代码在我的元素中不起作用

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 文件加载到文档底部)。

关于为什么会发生的简短解释

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

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

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

如果你不喜欢 jQuery，你可以使用 vanilla javascript 来实现，比如:

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

    // code code

}, false );

(请记住，DOMContentLoaded 比 jQuery 的就绪事件更严格一些，因为 DOMContentLoaded 实际上会等待页面中的所有内容加载 - 包括样式、脚本等。)

希望能帮到你