JavaScript 星级评分系统答案

【问题标题】：JavaScript Star Rating SystemJavaScript 星级评分系统
【发布时间】：2011-06-22 16:47:59
【问题描述】：

我有一个有效的星级评分系统，但如果用户已经投票并改变了投票的想法，他们将无法重置投票。

这是我在 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>

【问题讨论】：

我假设您从某个地方复制了这段代码？这很糟糕......
我正在修补一个以前外包的网页。我非常接近报废这个。
哇；把一些工作外包给我！如果我能因制作这样的东西而获得报酬，注册我！
如果您不要求，我通常不会挑剔代码，但他们是对的，这很糟糕。我确信 JQuery 有一些用于星级评分的插件，可能值得研究。
我想我会报废。已经在那条路上了。

标签： javascript ajax

【解决方案1】：

据我所知，阻止用户重新投票的唯一因素是您的 set 变量。

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

只需去掉if 子句，即使set==true 也应该运行

根据 Tomalak 的评论，我忘了说：

如果后端不支持，然后它将插入一个新的投票而不是而不是改变现有的。和因为似乎没有用户标识，会出现是这样的

如果您没有任何用户身份验证，至少使用 cookie 或其他东西来跟踪哪个用户是什么，以便编辑投票，而不是创建新投票。

至于设置 cookie，我建议在用户第一次投票后通过 Javascript 设置 cookie。在后端，无论您使用什么服务器端技术，都应该检查 cookie 是否已经存在，如果存在，请编辑排名条目而不是创建新条目。这是 JS 中关于 cookie 的一个很好的资源：@987654321@

【讨论】：

是的，set 变量最初是对我的调整。我会多玩一点。
-1 如果后端不支持这一点，那么它将插入一个新的投票而不是更改现有的投票。而且由于似乎没有任何用户标识，因此似乎就是这种情况。
@Tomalak Arggh 我正要提到这一点却忘记了。谢谢提醒。

【解决方案2】：

bootstrap V4 font-awesome pro jquery

$('.starts i').click(function(){
$('.starts i').removeClass('fas').addClass('fal');
var sindex=$('.starts i').index(this);
    for(var i=0;i<=sindex;i++){
        $('.starts i').eq(i).removeClass('fal').addClass('fas');
    }
})

<div class="starts h4 mt-3" style="color:#FBC02D">
<span class=" ml-2"><i class="fal fa-star"></i></span>
<span class="checked ml-2 title"><i class="fal fa-star"></i></span>
<span class="checked ml-2"><i class="fal fa-star"></i></span>
<span class="checked ml-2"><i class="fal fa-star"></i></span>
<span class="checked ml-2"><i class="fal fa-star"></i></span>
</div>

【讨论】：