我写了这段代码,这是一个评级系统。我想要发生的是当你将鼠标悬停在一颗星星上时,它应该触发之前的星星。
每当我将鼠标悬停在一颗星星上时,图片就会发生变化,但它之前的星星不会改变。
$('.star').hover(function(){
$(this).children().attr('src','StarsRating/star_yellow.png');
var count=$(this).attr('data-count');
var starArray =$('.star').toArray();
for(i=0; i<count; i++){
//The problem is here. the attributes of the stars should change to star_yellow.png..but they dont
控制台.log(starArray[i]); $(starArray[i]).attr('src','StarsRating/star_yellow.png'); }
},function(){
$(this).children().attr('src','StarsRating/star_grey.png');
});
html:
<div id="ratingStars">
<div class="star" data-count="1">
<img src="StarsRating/star_yellow.png"/>
</div>
<div class="star" data-count="2">
<img src="StarsRating/star_grey.png"/>
</div>
<div class="star" data-count="3">
<img src="StarsRating/star_grey.png"/>
</div>
<div class="star" data-count="4">
<img src="StarsRating/star_grey.png"/>
</div>
<div class="star" data-count="5">
<img src="StarsRating/star_grey.png"/>
</div>
当我将控制台放入循环中时,我得到的更新是:
<div class="star" data-count="1" src="StarsRating/star_yellow.png">…</div>
newEmptyPHPWebPage.php:41
<div class="star" data-count="2" src="StarsRating/star_yellow.png">…</div>
newEmptyPHPWebPage.php:41
<div class="star" data-count="3" src="StarsRating/star_yellow.png">…</div>
但是为什么我可以看到它在控制台上打开了,但在文档上却没有?