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

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">​…​&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');
});

最初の関数は、ホバリングされた星の以前のすべての兄弟を見つけ、それらを (ホバリングされた星と同様に) 黄色にします。2 番目の関数は、コンテナ要素のすべての子星を見つけて、再び灰色にします。

于 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 からのコメントに感謝します。ホバーしたスター要素には子がありません。ただし、兄弟があるため、 $(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 に答える