0

HTML5 と JavaScript を使用して 5 つ星評価の画像を作成しました。私は2つの別々の画像（グリーンスターとレッドスター）を持っています。

ウェブページに 5 つの別々の星の画像を表示しました。特定の星の画像 (3 番目の赤い星) をクリックすると、その星の画像 (1 番目、2 番目、3 番目の画像) をクリックする前までのすべての画像が緑色の星に変わります (4 番目と 5 番目は赤い星)。

上記の例の星の画像 (2 番目: greenstar) をクリックすると、クリックされたものまでのすべての星が緑色に変わります (3 番目、4 番目、5 番目は赤い星になるはずです)。

上記のものは正常に動作しています。必要なのは、2 つ目の星をクリックすると、(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 に答える