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

也应该运行

Per Tomalak的评论，我忘了提到：

如果后端不支持此功能，那么它会插入一个新的投票而不是改变现有的。和因为似乎没有任何用户识别，即将出现是这样的

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

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

Answer 2

bootstrap V4真棒专业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>

JavaScript星级评分系统

2 个答案: