Question

我有一个五星评级系统，其中包含以下html：

<div class="rate-small rate0"></div>

如果要阅读rate-small rate50表示所有五颗星都突出显示，同样rate-small rate25表示2.5星。

我想要做的是当用户盘旋在星星上时，当用户沿着星星移动鼠标时，它们会突出显示适当数量的星星。因此，如果他们在第二颗恒星上空盘旋，则会突出显示第一颗和第二颗恒星。如果他们是第五颗星，所有的星星都会突出显示。然后点击一下即可记录评级。

我的Jquery似乎工作正常，但是当我在console.log中供参考时，坐标似乎完全关闭了。最终我无法掌握如何告诉jquery何时用mousemove改变类。坐标似乎是正确的一次，然后不是下一次。最终我不喜欢我设置它的方式，显然它不能很好地工作，似乎应该有一个更好的方法来按比例应用悬停类而不使用这样的静态坐标，但我我们无法找到最佳接近方式：

var rate={
    start: function(){

       $('body').on('mousemove','div.rate-small',function(e){
       var x = e.pageX - this.offsetLeft;
       var y = e.pageY - this.offsetTop;
       //console.log(y);
        if(x>'534' && x<'662'){
            rate.makeBold();
            if(x>'540' && x<'550'){
             $(this).attr('class','rate-small rate5')   
            }
            else if(x>'550' && x<'560'){
             $(this).attr('class','rate-small rate10')  
            }
            else if(x>'560' && x<'570'){
             $(this).attr('class','rate-small rate15')  
            }
            else if(x>'570' && x<'580'){
             $(this).attr('class','rate-small rate20')  
            }
            else if(x>'580' && x<'590'){
             $(this).attr('class','rate-small rate25')  
            }
            else if(x>'590' && x<'600'){
             $(this).attr('class','rate-small rate30')  
            }
            else if(x>'600' && x<'610'){
             $(this).attr('class','rate-small rate35')  
            }
            else if(x>'610' && x<'620'){
             $(this).attr('class','rate-small rate40')  
            }
            else if(x>'620' && x<'630'){
             $(this).attr('class','rate-small rate45')  
            }
            else if(x>'630' && x<'660'){
             $(this).attr('class','rate-small rate50')  
            }
          }
       }).on('mouseleave','div.rate-small', function(){
             $(this).attr('class','rate-small rate0');
             rate.removeBold(); 

       }).on('click','div.rate-small', function(){
           var rateId = ($(this).attr('id'));
           var rateClass = ($(this).attr('class'));
           var rateNum = rateClass.replace(/[^0-9]/g, '')
           rate.sendrate(rateId,rateNum)
       })

  },
}

注意：这段代码运行得很好，但是现在当我在console.log的y坐标时，我在Chrome，FF和IE上大约有两三百个。所以，我是一个没有得到正确坐标的人，或者只有更好的方法来做到这一点，而不在div中指定这样严格的数字。

Answer 1

我建议使用10个单独的半星图像。然后用4行CSS

可以实现一切

HTML：

<div class="left_half"><img src="spacer.gif" width="16px" height="32px" onclick="rate( 5);"></div>
<div class="right_half"><img src="spacer.gif" width="16px" height="32px" onclick="rate(10);"></div>
<div class="left_half"><img src="spacer.gif" width="16px" height="32px" onclick="rate(15);"></div>
<div class="right_half"><img src="spacer.gif" width="16px" height="32px" onclick="rate(20);"></div>
<div class="left_half"><img src="spacer.gif" width="16px" height="32px" onclick="rate(25);"></div>
<div class="right_half"><img src="spacer.gif" width="16px" height="32px" onclick="rate(30);"></div>
<div class="left_half"><img src="spacer.gif" width="16px" height="32px" onclick="rate(35);"></div>
<div class="right_half"><img src="spacer.gif" width="16px" height="32px" onclick="rate(40);"></div>
<div class="left_half"><img src="spacer.gif" width="16px" height="32px" onclick="rate(45);"></div>
<div class="right_half"><img src="spacer.gif" width="16px" height="32px" onclick="rate(50);"></div>

CSS：

.left_half {
 background:url('left_half_empty.png');
}

.left_half:hover {
 background:url('left_half_full.png');
}

.right_half {
 background:url('right_half_empty.png');
}

.right_half:hover {
 background:url('right_half_full.png');
}

Answer 2

将它们分成透明的div用于每次进食。更少的代码。

如何在mousemove上应用按比例的类更改？

2 个答案: