Question

我目前正在制作一个五星评级系统的脚本。我有一系列5个fontawesome星形图标。当鼠标悬停在一颗恒星上时，那颗恒星及其后面的恒星应该变成满星而不是空星。我目前正在使用prevAll将变化应用于星星，但它对第一颗恒星不起作用...假设因为如果它是第一颗恒星，则没有'prev'恒星应用于prevAll（）。此外，当我将鼠标从星星上移开时，我想将它们恢复到原始状态，但是当我在mouseout方法中设置html时，它会删除它们。有一个更好的方法吗？我有没有想到的解决方法？这是一个jsFiddle来演示。谢谢你的时间。

<div class="rating">
  <i class="fa fa-star-o"></i>
  <i class="fa fa-star-o"></i>
  <i class="fa fa-star-o"></i>
  <i class="fa fa-star-o"></i>
  <i class="fa fa-star-o"></i>
</div>


$('.rating').each(function() {
    $element = $(this);
  console.log(originalStars);
  $(this).find('[class*="fa-star"]').each(function() {
    console.log('star icon found.');
    $(this).mouseover(function() {
        var stars = $(this).prevAll().length;
        $(this).prevAll().each(function() {
          $(this).removeClass('fa-star-o');
          $(this).addClass('fa-star');
        });
        $(this).nextAll().each(function(){
            $(this).removeClass('fa-star');
          $(this).addClass('fa-star-o');
        });
      });
  });
  var originalStars = $element.html();  
  $element.mouseleave(function(){
    $element.html(originalStars);
    console.log('mouse left element');
  });
});

更新：管理以在鼠标离开时恢复原始星星，但一旦发生这种情况，悬停效果将不再适用。我在这里和jsfiddle中更新了jquery。

Answer 1

这是你可以做的简单事情..

var originalStars = $('.rating').html();
$('.rating').on('mouseover','i[class*=" fa-star"]',function(){
    $(this).prevAll().andSelf().removeClass('fa-star-o').addClass('fa-star');
}).mouseout(function(){
    $(this).closest('.rating').html(originalStars)
})

将mouseover和mouseout个事件附加到包含i的{{1}}元素，并在此处跟随class-fa-star，因为您要将元素动态附加到event delegation通过将事件附加到div.rating

来替换其html ie event delegation

<强> Single Rating DEMO

多个评级功能的更新

div.rating

<强> Multiple rating DEMO

prevAll包括jQuery中的第一个元素

1 个答案: