函数和.hover中的JavaScript全局变量

Question

我在JavaScript中有以下代码：

status = document.getElementById('status2');

$('#slider > img').hover(
    function() {
        stopLoop();
        status.innerHTML = "paused";
    }, 
    function() {
        startSlider();
        status.innerHTML = "playing";
    }
);

在我的html中查找具有id滑块的所有图像，当我将鼠标悬停在上面时，我想向具有id status2的span标签添加一个单词（已暂停或正在播放）。 但是我不知道为什么全局变量不起作用，使它起作用的唯一方法是将局部变量放入每个函数中，如下所示：

function() {
    stopLoop();
    var status = document.getElementById('status2');
    status.innerHTML = "paused";
},
function() {
    startSlider();
    var status = document.getElementById('status2');
    status.innerHTML = "playing";
}

我可以为什么吗？

注意：正如我之前所说，所有方法都使用局部变量，但不将其设置为全局变量。

Answer 1

因为当你跑步的时候

status = document.getElementById('status2');

DOM尚未准备就绪，因此您的状态为未定义，因此它将无法进一步工作。

所以要么把代码准备好

$(document).ready(function(){
   //code goes here
})

要么

将脚本放在文件末尾。

Answer 2

一定要添加

$(document).ready(function(){

});

这将等待执行内部代码，直到所有内容加载完成。 这样，它不应该返回未定义的。

也

我忍不住注意到您似乎要为多个项目赋予相同的ID。

请勿将ID用于多个元素。 那不是设计它们使用的方式，也不是那样工作。如果给多个元素相同的ID，然后尝试使用CSS设置样式，则只会设置第一个样式。 使用课程。 如果您使用

document.getElementById();

要尝试获取具有相同ID的多个元素，则脚本将仅获取具有该ID的FIRST元素，因为给定它是一个ID，因此它仅预期一个元素。 如果要使用多个元素，请使用一个类，然后使用

document.getElementsByClassName();

这将获取该类的所有元素。 例如，假设您有四个span元素，其类为“ foo”。 要抓住所有这些并更改文本，请执行以下操作：

 elements=document.getElementsByClassName("foo");
for (i=0; i<elements.length; i++){
elements[i].innerHTML='insert your text here';
}

关于全局和局部变量，以这种方式声明GLOBAL变量：

global_variable='foo'

并以这种方式声明局部变量：

var local_variable='foo'

全局变量可以在脚本中的任何位置声明，也可以在脚本中的任何位置使用（甚至在附加到同一HTML文件的其他脚本中），而局部变量（如果在函数中声明）只能在内部使用。函数，或者如果您在函数外部声明它，除非将变量传递给它，否则无法在函数内对其进行访问。

希望有帮助！