1

基本的に星評価システムの評価システムのコードを書きましたが、すべて正常に機能し、コードは良好です

<script type="text/javascript">
(function($){

   $(document).ready(function() {
    var $option = $('.option');
    var $fruit = $('.fruit-name');
    var $last;
    var parent
    $option.click(function() {
        parent=$(this).parents('.comment-form-rating');
        $('.fruit-name',parent).val(this.innerHTML)
    })


$(".starr1").hover(function(){
    parent=$(this).parents('.comment-form-rating');
    $('.starr1',parent).css('color','gold')
    },function(){
    $(".starr1").css("color","#ddd");
  });


$(".starr2").hover(function(){
    parent=$(this).parents('.comment-form-rating');
    $('.starr1',parent).css('color','gold')
    $('.starr2',parent).css('color','gold')
    },function(){
    $(".starr1").css("color","#ddd");
    $(".starr2").css("color","#ddd");
  });

$(".starr3").hover(function(){
    parent=$(this).parents('.comment-form-rating');
    $('.starr1',parent).css('color','gold')
    $('.starr2',parent).css('color','gold')
    $('.starr3',parent).css('color','gold')
    },function(){
    $(".starr1").css("color","#ddd");
    $(".starr2").css("color","#ddd");
    $(".starr3").css("color","#ddd");
  });

$(".starr4").hover(function(){
    parent=$(this).parents('.comment-form-rating');
    $('.starr1',parent).css('color','gold')
    $('.starr2',parent).css('color','gold')
    $('.starr3',parent).css('color','gold')
    $('.starr4',parent).css('color','gold')
    },function(){
    $(".starr1").css("color","#ddd");
    $(".starr2").css("color","#ddd");
    $(".starr3").css("color","#ddd");
    $(".starr4").css("color","#ddd");
  });

$(".starr5").hover(function(){
    parent=$(this).parents('.comment-form-rating');
    $('.starr1',parent).css('color','gold')
    $('.starr2',parent).css('color','gold')
    $('.starr3',parent).css('color','gold')
    $('.starr4',parent).css('color','gold')
    $('.starr5',parent).css('color','gold')
    },function(){
    $(".starr1").css("color","#ddd");
    $(".starr2").css("color","#ddd");
    $(".starr3").css("color","#ddd");
    $(".starr4").css("color","#ddd");
    $(".starr5").css("color","#ddd");
  });

});

})(jQuery);
</script>

しかし、ユーザーが星5をクリックするとすべての星が赤色になるように、星のクリック関数を定義する必要があります-

私はこのように定義しました

$(".starr5").click(function () {
    parent = $(this).parents('.comment-form-rating');
    $('.starr1', parent).css('color', '#FF7777')
    $('.starr2', parent).css('color', '#FF7777')
    $('.starr3', parent).css('color', '#FF7777')
    $('.starr4', parent).css('color', '#FF7777')
    $('.starr5', parent).css('color', '#FF7777')
});

ここで問題が発生します-星が赤くなりますが、マウスを左にすると再び灰色になり、ホバーの黄色の機能の上にマウスを置くと、完全に混乱しますそれを機能させるコードをさらに記述する方法.

4

2 に答える 2

1

出入りするときにクラスを追加および削除するだけです。

の上mouseenter

.addClass('gold')

の上click 

.removeClass('gold').addClass('red');

の上mouseleave

.removeClass('gold');

そして、あなたはうまくやっています。ハッピーコーディング。

リクエストに応じて Star1 の例:

   <style type="text/css">
        .gold{color: gold;}
        .red{color: #FF7777;}
        .yourDefaultStarClass{color: #ddd;}
    </style>

    <script type="text/javascript">
    (function($){
        $(".starr1").hover(function(){
        parent=$(this).parents('.comment-form-rating');
        $('.starr1',parent).addClass('gold');
        },function(){
        $(".starr1").removeClass('gold');

        });

        $(".starr5").click(function () {
        parent = $(this).parents('.comment-form-rating');
        $('.starr1', parent).removeClass('gold').addClass('red');
        }); 

    });          
    </script>
于 2013-06-06T12:37:55.827 に答える
1

HTML がすべての要素とクラスで混乱していることは想像に難くありません...
生活を簡素化するために、私は非常に単純なコードを書きました。

星評価のデモ

必要なのはこれだけです：

HTML:

<img class="stars" data-rated="4" src="whiteImgWithStarsHoles.png" />

ここで、data-rated はサーバーから返される値 (1 ～ 5) です。
背景色に合わせた画像を作成し、星形の穴を 5 つ作成して.pngとして保存します。

CSS:

.stars{
  cursor:pointer;
  max-width:200px; /* respective to the gray image width */
  background: gold url(grayimage200x100.jpg) no-repeat 0 bottom;
  /* transition: 1s;*/
}
.stars.red{
  background-color: red;
}

jQuery:

$('.stars').each(function(){
  
  var $this = $(this),
      starW = $this.width() / 5,
      rated = 0;
  
  function setRates(){
    rated = $this.data('rated') * starW;
    $this.css({backgroundPosition: rated+'px top'});
  }
  setRates();
  
  $this.on('mousemove', function( e ){
    rated = Math.ceil( (e.clientX-$this.offset().left) / starW );   
    $this.not('.red').css({backgroundPosition: rated*starW +'px top'});
  }).on('mouseleave', setRates).on('click', function(){
    $this.not('.red').data('rated', rated).addClass('red');
    // alert("Send to server: "+   rated   );
  }); 
  
});
于 2013-06-06T13:51:28.423 に答える