1

我创建了这个小提琴来显示我的问题。

我在用户单击评分后设置所选值，但希望在用户再次悬停时删除所选值。

如果它们远离星形区域，我想选择原始值（如果已选择）。

这将允许他们选择另一个评级，但如果他们将鼠标悬停，则会显示先前选择的评级。

这是我对 jquery 的尝试：

$('.star').click(function(e) {

e.preventDefault();

var rating = this.firstChild.data;

    if (rating > 0) {

      $('.star.star_'+rating).addClass('hovered');

      // Trying to remove class if hovered but replace selected value when I mouse out

      /*
          $('.star_container').hover(function() {
                $('.star.star_'+rating).removeClass('hovered');
          });
      */

    }   
});

我有什么办法可以做到这一点？

4

2 回答 2

6

http://jsfiddle.net/d4uPX/13/

我所做的是当用户单击一个元素时，将评分附加为数据值以供参考。

$('.star_container').data('rating', rating);

然后这是您的悬停功能：

$('.star').hover(function() {
  $('.star').removeClass('hovered');
}, function(){
  $('.star.star_'+ $('.star_container').data('rating')).addClass('hovered');
});
于 2013-01-11T21:31:19.133 回答
0

我的解决方案，只是使用一个封闭的变量来存储评级......然后检查它是否已设置。应该为您工作（并且您不必每次都重新选择容器来获取数据元素）：

http://jsfiddle.net/d4uPX/17/

var rating;

$('.star').click(function(e) {          
   e.preventDefault();

    rating = this.firstChild.data;

    if (rating > 0) {         
        $('.star.star_'+rating).addClass('hovered');
    }
});

$('.rating_container').hover(
    function() {
        $('.star.star_'+rating).removeClass('hovered');
    },
    function() {
        if(rating){
            $('.star.star_'+rating).addClass('hovered');
        }
    }
);
于 2013-01-11T21:41:11.193 回答