0

我使用 HTML5 和 javascript 开发了 5 星评级图像。我有 2 个单独的图像（绿星和红星）。

我在网页中显示了 5 个单独的星图。如果我单击特定的星图（第 3 颗红星），则在单击星图（第 1、2、3 图像）之前的所有图像都应更改为绿星。（第 4 和第 5 是红星）。

如果单击上面示例中的星图（第 2 个：greenstar），则单击该星之前的所有星都应变为绿色。（第 3、第 4、第 5 应为红星）。

上面的东西工作正常。我需要的是，当我单击第二颗星时，它（第 1+2 颗为绿色，第 3+4+5 颗为红色）从红色变为绿色，如果我再次单击第 2 颗星，则所有 5 颗星必须变为红色。

function ChangeState (index, parent) { 
    var colStars = parent.getElementsByTagName ("img");
    for(var k=0;k <colStars.length;k++) { 
    colStars [k]. src = (k <index? "Images/greenstar.png": "Images/redstar.png"); } 
}

这里的“索引”说明点击了哪个星号。

4

1 回答 1

1

您可以只保存当前按下的索引，与新的索引匹配，如果索引相同则重置颜色。试试这样：

var previndex = -1;
function ChangeState (index, parent) {
    var colStars = parent.getElementsByTagName ("img");
    if(previndex==index){
        previndex = -1;
        index = -1;
    }else{
        previndex = index;
    }
    for(var k=0;k <colStars.length;k++) { 
        colStars [k]. src = (k <index? "Images/greenstar.png": "Images/redstar.png");
    } 
}
于 2013-07-28T11:51:23.717 回答