Question

所以我正在制作jquery / javascript的幻灯片插件，我目前正在尝试使用类名＆＃34;幻灯片＆＃34;创建所有元素的列表。为此，我在javascript模块的顶部定义了一个全局变量，该变量调用一个函数（应该）返回具有类名＆＃34;幻灯片＆＃34;的元素列表。虽然，由于某种原因，它返回一个空数组，在函数内部和外部，即使显然有一个带有类名的div＆＃34;幻灯片＆＃34;，除了当我打印时在单独的函数（不是前面提到的函数）内部的模块顶部定义的全局变量，它没有缺陷。

这是html：

<head>
    <script src="http://ajax.googleapis.com/ajax/libs/jquery/1/jquery.min.js"></script>
    <script type="text/javascript" src="slideshow.js"></script>
</head>

<body>
    <div class="slideshow"></div>
</body>

这是javascript / jquery模块＆＃34; slideshow.js＆＃34;：

var slideshows = getSlideshows();

function getSlideshows() {
    var slideshows = document.getElementsByClassName("slideshow");
    console.log(slideshows); // prints []
    return slideshows;
}

console.log(slideshows); // prints []

$(function test1() {
    console.log(slideshows); // prints [div.slideshow], which is correct.
});

知道它为什么要打印不同的值？

谢谢！

Answer 1

您有两种选择，要么您可以将脚本放在页脚中，要么在文档准备就绪时将其包装并告诉它：

$( document ).ready(function() {
    var slideshows = getSlideshows();

    function getSlideshows() {
      var slideshows = document.getElementsByClassName("slideshow");
      console.log(slideshows);
      return slideshows;
    }

    console.log(slideshows);
}

否则，您的脚本会在它尝试引用的html之前触发。

Answer 2

<head>部分中的脚本在解析页面正文之前执行，因此HTMLCollection返回的getElementsByClassName在前两次显示时为空。 / p>

文档完全加载后，test1运行并显示元素。那是因为HTMLCollection is live：它会随着DOM的变化而自动更新。

为什么这个变量根据功能而不同？

2 个答案: