我为我制作的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";
}
}
}
}
答案 0 :(得分: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];