javascript - getElementsByClassName 在 Firefox 中不起作用

Question

我为自己制作的 5 星评级系统编写了这个脚本，当用户将鼠标悬停在星星上方时，它会使星星亮起，例如:如果用户将鼠标悬停在第三颗星星上方，则该星星显示为以及前两个。该脚本适用于除 FireFox 之外的所有较新的浏览器。我已经为此绞尽脑汁了一段时间，但无法弄清楚为什么它在 Firefox 中不起作用。任何帮助表示赞赏。此外，我只对有关原始 Javascript 的响应感兴趣，而不对 JQuery 或任何其他框架感兴趣。非常感谢。

function btnSwap(){
var myBtns = document.getElementsByClassName('btns');
for(i=0; i<myBtns.length; i++){
    var elem = document.getElementById(myBtns[i].id);
    elem.src = "images/"+"starNorm.png";
    elem.onmouseover = btnOver;
    elem.onmouseout = btnOut;
    function btnOver(){
        var lit = document.getElementById(this.id);
        if(lit.id == "rb1"){
        lit.src = "images/"+"starOver.png";
        }
        if(lit.id == "rb2"){
        lit.src = "images/"+"starOver.png";
        document.getElementById('rb1').src = "images/"+"starOver.png";
        }
        if(lit.id == "rb3"){
        lit.src = "images/"+"starOver.png";
        document.getElementById('rb1').src = "images/"+"starOver.png";
        document.getElementById('rb2').src = "images/"+"starOver.png";
        }
        if(lit.id == "rb4"){
        lit.src = "images/"+"starOver.png";
        document.getElementById('rb1').src = "images/"+"starOver.png";
        document.getElementById('rb2').src = "images/"+"starOver.png";
        document.getElementById('rb3').src = "images/"+"starOver.png";
        }
        if(lit.id == "rb5"){
        lit.src = "images/"+"starOver.png";
        document.getElementById('rb1').src = "images/"+"starOver.png";
        document.getElementById('rb2').src = "images/"+"starOver.png";
        document.getElementById('rb3').src = "images/"+"starOver.png";
        document.getElementById('rb4').src = "images/"+"starOver.png";
        }

}

function btnOut(){
        var lit = document.getElementById(this.id);
        if(lit.id == "rb1"){
        lit.src = "images/"+"starNorm.png";
        }
        if(lit.id == "rb2"){
        lit.src = "images/"+"starNorm.png";
        document.getElementById('rb1').src = "images/"+"starNorm.png";
        }
        if(lit.id == "rb3"){
        lit.src = "images/"+"starNorm.png";
        document.getElementById('rb1').src = "images/"+"starNorm.png";
        document.getElementById('rb2').src = "images/"+"starNorm.png";
        }
        if(lit.id == "rb4"){
        lit.src = "images/"+"starNorm.png";
        document.getElementById('rb1').src = "images/"+"starNorm.png";
        document.getElementById('rb2').src = "images/"+"starNorm.png";
        document.getElementById('rb3').src = "images/"+"starNorm.png";
        }
        if(lit.id == "rb5"){
        lit.src = "images/"+"starNorm.png";
        document.getElementById('rb1').src = "images/"+"starNorm.png";
        document.getElementById('rb2').src = "images/"+"starNorm.png";
        document.getElementById('rb3').src = "images/"+"starNorm.png";
        document.getElementById('rb4').src = "images/"+"starNorm.png";
        }


    }
}

Answer 1

不要将函数声明放在 for 循环中。

function btnSwap(){

    var myBtns = document.getElementsByClassName('btns');

    // begin loop
    for(i=0; i<myBtns.length; i++){
        var elem = document.getElementById(myBtns[i].id);
        elem.src = "images/"+"starNorm.png";
        elem.onmouseover = btnOver;
        elem.onmouseout = btnOut;
    }

    // outside the loop.. now function declarations.

    function btnOver(){
        var lit = document.getElementById(this.id);
        if(lit.id == "rb1"){
        lit.src = "images/"+"starOver.png";
        }
        if(lit.id == "rb2"){
        lit.src = "images/"+"starOver.png";
        document.getElementById('rb1').src = "images/"+"starOver.png";
        }
        if(lit.id == "rb3"){
        lit.src = "images/"+"starOver.png";
        document.getElementById('rb1').src = "images/"+"starOver.png";
        document.getElementById('rb2').src = "images/"+"starOver.png";
        }
        if(lit.id == "rb4"){
        lit.src = "images/"+"starOver.png";
        document.getElementById('rb1').src = "images/"+"starOver.png";
        document.getElementById('rb2').src = "images/"+"starOver.png";
        document.getElementById('rb3').src = "images/"+"starOver.png";
        }
        if(lit.id == "rb5"){
        lit.src = "images/"+"starOver.png";
        document.getElementById('rb1').src = "images/"+"starOver.png";
        document.getElementById('rb2').src = "images/"+"starOver.png";
        document.getElementById('rb3').src = "images/"+"starOver.png";
        document.getElementById('rb4').src = "images/"+"starOver.png";
        }

    }

    function btnOut(){
        var lit = document.getElementById(this.id);
        if(lit.id == "rb1"){
        lit.src = "images/"+"starNorm.png";
        }
        if(lit.id == "rb2"){
        lit.src = "images/"+"starNorm.png";
        document.getElementById('rb1').src = "images/"+"starNorm.png";
        }
        if(lit.id == "rb3"){
        lit.src = "images/"+"starNorm.png";
        document.getElementById('rb1').src = "images/"+"starNorm.png";
        document.getElementById('rb2').src = "images/"+"starNorm.png";
        }
        if(lit.id == "rb4"){
        lit.src = "images/"+"starNorm.png";
        document.getElementById('rb1').src = "images/"+"starNorm.png";
        document.getElementById('rb2').src = "images/"+"starNorm.png";
        document.getElementById('rb3').src = "images/"+"starNorm.png";
        }
        if(lit.id == "rb5"){
        lit.src = "images/"+"starNorm.png";
        document.getElementById('rb1').src = "images/"+"starNorm.png";
        document.getElementById('rb2').src = "images/"+"starNorm.png";
        document.getElementById('rb3').src = "images/"+"starNorm.png";
        document.getElementById('rb4').src = "images/"+"starNorm.png";
        }

    }
}

---

解释

Firefox 尊重包装函数声明的条件代码块。例如:

if (true) {
    function a() { return 1; }
} else {
    function a() { return 2; }
}
a(); // => Chrome: 2, Firefox: 1

由于 for 代码块可能不 被执行，因此 Firefox 尝试尊重 for 循环的条件性质。您可以在 while (false) 循环中更直接地看到这一点。

while(false) {
    function a() { return 'a'; }
}
a(); // => Chrome: 'a', Firefox: Throws an error.

在 Firefox 中，a 永远不会被定义，因为条件永远不会成功。

但是，如果有一个无论条件如何都会执行的代码块，函数定义将被提升。我们可以在 do...while 循环中看到这一点。

var x = a;
do {
    function a() { return 'a'; }
} while(false);
x(); // => Both browsers: 'a'

这里提升没有问题，因为 do...while 代码块总是保证执行。

---

此外，您这样做有什么原因吗？

var elem = document.getElementById(myBtns[i].id)

如果您已经拥有某个元素，则无需通过 id 获取它。只需使用

var elem = myBtns[i];