Question

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

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

             $('.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

的console.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>

但为什么我可以看到它打开了控制台，但没有打开文档？

Answer 1

如果要突出显示所有星星，包括悬停在其上的星星，如果使用.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');
});

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

Answer 2

你的逻辑存在问题。在你的悬浮功能里面，你得到一个星形物体的孩子，但你真正想要的是星形物体的父母的孩子们:)

你有：

$(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');


});

Answer 3

答案是：

        <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（）; ＆lt; - 我得到了divs

var starArray = $（'。star'）。children（）。toArray（）;＆lt; - 现在我得到了图片

jQuery toArray函数以及如何使用它的元素

3 个答案: