Question

我用3张图片创建了评分系统。问题是，当我想评价一篇文章（而不是第一篇）时，所有之前文章的评级图片都会发生同样的情况。评级系统使用JavaScript创建，文章数据来自MySQL。

<form id="ratethis-<?=$PK?>" action="rate.php?idPI=<?=$idPK?>" method="post">

<div id="rating" class="rating">
<input type="hidden" value="-1"  class="ratingval"/>
<input type="hidden" value="-1" name="rating" class="clicked"/>
<img name="1" src="img/1.png"   />
<img name="2" src="img/2.png"  />
<img name="3" src="img/3.png"  />

 <div>



<input type="submit" value="Submit"/><br><br>
</div>
</form>

抱歉！ JavaScript代码：

<script src="js/jquery-1.6.2.min.js" type="text/javascript"></script>
<script src="js/jquery-ui-1.8.16.custom.min.js" type="text/javascript"></script>
<script>
$(function () { 
$(".rating").each(function(){
    var id = $(this)[0].id;
    $("#" + id + " img").each(function(){
        $(this).mouseover(function(){
            var index = $(this).index()-1;
            $("#" +id+ " .ratingval")[0].value = index;
            $("#" +id+ " .result")[0].innerHTML = $(this).attr("text");
            for(var i=0;i<index;i++)
            {
                $($("#" +id+ " img")[i]).attr("src","img/3.png");
            }
        });
        $(this).click(function(){
            var index = $(this).index();
            $("#" +id+ " .ratingval")[0].value = index;
            $("#" +id+ " .clicked")[0].value = index-1;
        });
        $(this).mouseout(function(){
            var curretn = $("#" +id+ " .clicked")[0].value;
            $(this).attr("src","img/2.png");
            var index = $(this).index();
            for(var i=0;i<curretn;i++)
            {
                $($("#" +id+ " img")[i]).attr("src","img/3.png");
            }
            for(var j=curretn;j<index;j++)
            {
                $($("#" +id+ " img")[j]).attr("src","img/2.png");
            }
        });
    });
});
 });
 </script>

Answer 1

这是因为你正在使用

    $(".rating").each(function(){
    ...
    }

对每个选择器匹配执行上述代码，即“.rating”。

尝试为每篇文章生成一个虚拟类，然后尝试使用这种方法：

    $("article1 .rating").each(function(){...}
    $("article2 .rating").each(function(){...}

依旧......

当我点击图像来评价同样的情况发生在另一个评级图像中

1 个答案: