再次单击时如何更改图像？答案

【问题标题】：how to change image on clicking it again?再次单击时如何更改图像？
【发布时间】：2013-07-28 11:37:09
【问题描述】：

我使用 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"); } 
}

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

【问题讨论】：

你为什么要这样做？如果您尝试降低（撤消当前评级）这不是一个好方法，那么有很多情况会干扰您的实施！

标签： javascript html

【解决方案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");
    } 
}

【讨论】：