星级评分系统 - 悬停+点击问题

Posted 2023-05-09

【中文标题】星级评分系统 - 悬停+点击问题

【英文标题】：Star rating system - Issue with hover + click

【发布时间】：2013-06-02 10:42:51

【问题描述】：

我已经写了一个评分系统星级评分系统的代码，一切正常，代码很好

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

这就是问题所在 - 现在星形变为红色，但在鼠标离开时它们再次变为灰色，鼠标悬停在黄色功能上时开始工作 - 完全困惑如何编写进一步的代码使其工作。

【问题讨论】：

就像 Chris Coyier 所说的“只做一个 JSFiddle”jsfiddle.net

请分享您的代码的 jsFiddle。另外，您正在使用哪个浏览器？当调试器控制台保持打开状态时，我在 v26 的 Chrome 中遇到了类似的问题。

你能分享你的html语法吗

jquery 的两个选项冲突-当我鼠标离开时悬停功能触发，从而使红色星星消失。

【参考方案1】：

你应该在进入和离开时添加和删除类，所以当

在mouseenter

.addClass('gold') 

在click

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

在mouseleave

.removeClass('gold');

而且你做得很好；快乐编码。

应要求提供 Star1 示例：

   <style type="text/css">
        .goldcolor: gold;
        .redcolor: #FF7777;
        .yourDefaultStarClasscolor: #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>

【讨论】：

您能否通过修改前starr1 行并解释它来进一步解释一下 - 这意味着我必须将类添加到我的星号？

@CidUbaid 提供了星号 1 的代码，您还应该在 html 中使用 class 和 id 进行一些工作

【参考方案2】：

我可以想象你在 HTML 中的所有元素和类的混乱...... 为了简化您的生活，我编写了一个非常简单的代码：

STARS RATING DEMO

这就是你所需要的：

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   );
  ); 
  
);