Question

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

我在网页上显示了5个单独的星图。如果我点击一个特定的星形图像（第3个红星），所有图像直到点击星形图像（第1，第2，第3个图像）之前应该变为绿色星标。（第4个和第5个是红色星球）。

如果从上面的例子中点击了一个星形图像（第二个：绿色星球），所有星星直到点击一个应该变成绿色。（第3个，第4个，第5个应该是红色星球）。

以上的事情很好。我需要的是当我点击第二颗星时，它（第一+第二是绿色，第三+第四+第五是红色）从红色变为绿色＆amp;如果我再次点击第二颗星，则所有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"); } 
}

此处“index”表示点击了哪个星号。

Answer 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");
    } 
}

如何在再次点击它时更改图像？

1 个答案: