再次單擊該如何更改圖像？

Question

我已經使用HTML5和javascript開發了5星級圖像。 我有2張單獨的圖片（綠星和紅星）。

我在網頁中顯示了5個單獨的starimage。 如果我單擊了特定的starimage（第3個紅星），則直到單擊該starimage（第1，第2，第3個圖像）之前的所有圖像都應更改為greenstar。（第4和第5個為紅星）。

如果單擊上例中的starimage（2nd：greenstar），則直到單擊的所有星星都應變為綠色。（3rd，4th，5th應該是紅星）。

上面的東西工作正常。 我需要的是當我單擊第二顆星時（第一顆+第二顆為綠色，第三顆+第四顆+第五顆為紅色）從紅色變為綠色，並且如果我再次單擊第二顆星，則所有五顆星必須更改為紅色。

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

此處的“索引”指出了點擊的星號。

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