2

我为我制作的一个 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";
        }


    }
}

}

4

1 回答 1

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];
于 2012-11-04T00:20:04.047 回答