1

我写了这段代码,这是一个评级系统。我想要发生的是当你将鼠标悬停在一颗星星上时,它应该触发之前的星星。

每当我将鼠标悬停在一颗星星上时,图片就会发生变化,但它之前的星星不会改变。

             $('.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">​…​&lt;/div>​
newEmptyPHPWebPage.php:41
<div class=​"star" data-count=​"2" src=​"StarsRating/​star_yellow.png">​…​&lt;/div>​
newEmptyPHPWebPage.php:41
<div class=​"star" data-count=​"3" src=​"StarsRating/​star_yellow.png">​…​&lt;/div>

但是为什么我可以看到它在控制台上打开了,但在文档上却没有?

4

3 回答 3

2

如果您想突出显示所有星星,包括悬停的星星,如果您使用该.prevAll函数,则不需要数组和循环。

尝试:

$('.star').hover(function() {
    var star = $(this);
    star.add(star.prevAll('.star')).find('img').attr('src','StarsRating/star_yellow.png');
},function() {
    $(this).parent().children('.star').find('img').attr('src','StarsRating/star_grey.png');
});

第一个函数找到悬停星的所有先前兄弟并将它们(以及悬停的星)变为黄色。第二个函数查找容器元素的所有子星并将它们再次变为灰色。

于 2012-08-06T18:32:22.027 回答
1

你的逻辑有问题。在你的悬停函数中,你得到一个星对象的子对象,但你真正想要的是星对象的父对象的子对象:)

你有:

$(this).children().attr('src','StarsRating/star_yellow.png'); 

可能工作:

$(this).parent().children().attr('src', 'StarsRating/star_yellow.png');

感谢 jackwanders 的评论:.children() 查找在 DOM 中分层低于目标元素的元素,而不仅仅是在源代码中出现在它之后的那些元素。您悬停的星形元素没有子元素。但是,它确实有兄弟姐妹,所以 $(this).siblings('.star') 会起作用,就像 $(this).parent().children('.star')

这也必须改变:

 var starArray = $('.star').toArray();

$('.star').children().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
            $(starArray[i]).attr('src','StarsRating/star_yellow.png');
        }

试试 jquery .each 函数:http ://api.jquery.com/each/

$("#ratingStars").each(function(index) {

    if( index >= count ) 
        return false; // break

    $(this).attr('src', 'StarsRating/star_yellow.png');


});
于 2012-08-06T18:15:18.803 回答
0

这就是答案:

        <script type="text/javascript">
         $('.star').hover(function(){
            $(this).children().attr('src','StarsRating/star_yellow.png'); 
            var count=$(this).attr('data-count');
            **var starArray =$('.star').children().toArray();**

            for(i=0; i<count; i++){

                var current= $(starArray[i]);
               current.attr('src','StarsRating/star_yellow.png');
            }

         },function(){
             $('.star img').attr('src','StarsRating/star_grey.png');


         });
    </script>

var starArray =$('.star').toArray(); <--我得到了 div

var starArray =$('.star').children().toArray();<-- 现在我得到了图像

于 2012-08-06T18:35:35.550 回答