JavaScript Звездная рейтинговая система

Question

У меня есть работающая звездная рейтинговая система, но если пользователь уже проголосовал и передумал при голосовании, он не может сбросить свой голос.

Вот что у меня есть в Javascript:

<script type="text/javascript">

var set = false;
var v = 0;
var a;

function loadStars() {
    star1 = new Image();
    star1.src = "images/star1.png";
    star2 = new Image();
    star2.src = "images/star2.png";
}

function highlight(x) {
    if (set == false) {
        y = x * 1 + 1
        switch (x) {
        case "1":
            document.getElementById(x).src = star2.src;
            document.getElementById('vote').innerHTML = "One star";
            break;
        case "2":
            for (i = 1; i < y; i++) {
                document.getElementById(i).src = star2.src;
            }
            document.getElementById('vote').innerHTML = "Two stars"
            break;
        case "3":
            for (i = 1; i < y; i++) {
                document.getElementById(i).src = star2.src;
            }
            document.getElementById('vote').innerHTML = "Three stars"
            break;
        case "4":
            for (i = 1; i < y; i++) {
                document.getElementById(i).src = star2.src;
            }
            document.getElementById('vote').innerHTML = "Four stars"
            break;
        case "5":
            for (i = 1; i < y; i++) {
                document.getElementById(i).src = star2.src;
            }
            document.getElementById('vote').innerHTML = "Five stars"
            break;
        }
    }
}

function losehighlight(x) {
    if (set == false) {
        for (i = 1; i < 6; i++) {
            document.getElementById(i).src = star1.src;
            document.getElementById('vote').innerHTML = ""
        }
    }
}

function setStar(x) {
    y = x * 1 + 1
    if (set == false) {
        switch (x) {
        case "1":
            a = "1"
            flash(a);
            break;
        case "2":
            a = "2"
            flash(a);
            break;
        case "3":
            a = "3"
            flash(a);
            break;
        case "4":
            a = "4"
            flash(a);
            break;
        case "5":
            a = "5"
            flash(a);
            break;
        }
        set = true;
        insertrating(x, '<?=$themeid?>');
        document.getElementById('vote').innerHTML = "Thank you!";
    }

    function flash() {
        y = a * 1 + 1
        switch (v) {
        case 0:
            for (i = 1; i < y; i++) {
                document.getElementById(i).src = star1.src;
            }
            v = 1
            setTimeout(flash, 200)
            break;
        case 1:
            for (i = 1; i < y; i++) {
                document.getElementById(i).src = star2.src;
            }
            v = 2
            setTimeout(flash, 200)
            break;
        case 2:
            for (i = 1; i < y; i++) {
                document.getElementById(i).src = star1.src;
            }
            v = 3
            setTimeout(flash, 200)
            break;
        case 3:
            for (i = 1; i < y; i++) {
                document.getElementById(i).src = star2.src;
            }
            v = 4
            setTimeout(flash, 200)
            break;
        case 4:
            for (i = 1; i < y; i++) {
                document.getElementById(i).src = star1.src;
            }
            v = 5
            setTimeout(flash, 200)
            break;
        case 5:
            for (i = 1; i < y; i++) {
                document.getElementById(i).src = star2.src;
            }
            v = 6
            setTimeout(flash, 200)
            break;
        }
    }

</script>

Как бы я мог позволить пользователю повторно подать голос?

Мой HTML выглядит так:

<span style="float: left; text-align: left;"> Rate This Theme<br />
    <img src="images//star1.png" onMouseOver="highlight(this.id)" onClick="setStar(this.id)" onMouseOut="losehighlight(this.id)" id="1" style="float: left;" /> 
    <img src="images/star1.png" onMouseOver="highlight(this.id)" onClick="setStar(this.id)" onMouseOut="losehighlight(this.id)" id="2" style="float: left;" /> 
    <img src="images/star1.png" onMouseOver="highlight(this.id)" onClick="setStar(this.id)" onMouseOut="losehighlight(this.id)" id="3" style="float: left;" /> 
    <img src="images/star1.png" onMouseOver="highlight(this.id)" onClick="setStar(this.id)" onMouseOut="losehighlight(this.id)" id="4" style="float: left;" /> 
    <img src="images/star1.png" onMouseOver="highlight(this.id)" onClick="setStar(this.id)" onMouseOut="losehighlight(this.id)" id="5" style="float: left;" /> 
</span> 

Answer 1

Насколько я могу судить, единственное, что мешает пользователю повторно голосовать, - это ваша переменная set.

   if (set==false)
   {
   ...  
   set=true;

Просто избавьтесь от предложения if, и оно запустится, даже если set==true

За комментарий Томалака, я забыл упомянуть, что:

Если бэкэнд не поддерживает это, тогда он будет вставлять новый голос, а чем изменение существующего. А также так как, кажется, нет идентификация пользователя, которая появится быть таковым

Если у вас нет какой-либо аутентификации пользователя, по крайней мере, используйте куки или что-то еще, чтобы отследить, какой пользователь является тем, чтобы голосование было отредактировано, а не создано новым.

Что касается настройки файлов cookie, я бы рекомендовал устанавливать файлы cookie через Javascript, как только пользователь проголосует в первый раз. С другой стороны, все, что вы используете для серверной технологии, должно проверять, существует ли уже файл cookie, и, если он есть, отредактировать запись ранжирования вместо создания новой. Вот хороший ресурс о файлах cookie в JS: http://www.quirksmode.org/js/cookies.html