Question

我已创建此fiddle以显示我的问题。

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

如果他们远离星区，我想选择原始值（如果已选中）。

这将允许他们选择另一个评级，但如果他们鼠标移出则显示之前选择的评级。

这是我对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');
          });
      */

    }   
});

我能以任何方式完成这项任务吗？

Answer 1

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

Answer 2

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

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

我可以使用jquery在mouseout后恢复一个值吗？

2 个答案: