javascript - 当我单击图像进行评分时，另一张评分图像中也会发生同样的情况

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(){...}

等等...