prevAll包括jQuery中的第一個元素

我目前正在研究一個五星評級系統的腳本。我有一行5個fontawesome星形圖標。當鼠標懸停在一顆恆星上時，該恆星和它後面的恆星應該變成滿星，而不是空星。我目前使用prevAll將變化應用於星星，但對於第一顆星星不起作用...假設因爲如果它是第一顆星星，沒有'prev'星星可以應用於prevAll（）。另外，當我將鼠標從星星上移開時，我想將它們返回到原始狀態，但是當我使用鼠標移出方法設置html時，它會將它們擦除。有一個更好的方法嗎？有沒有我沒有想到的解決方法？這裏是一個jsFiddle來演示。謝謝你的時間。prevAll包括jQuery中的第一個元素

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

更新：管理得到在mouseleave上恢復的原始星星，但是一旦發生這種情況，懸停效果不再適用。我在這裏和jsfiddle更新了jquery。

來源

2016-02-22 ShoeLace1291

見http://stackoverflow.com/questions/35107499/different-css-background-for - 每一個-DIV-在-prevalll / – guest271314

這裏是簡單的事情你可以做什麼..

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

附加包含class-fa-starmouseover和mouseout事件i元素也跟着event delegation在這裏，因爲你被替換其html動態附加元素div.rating即event delegation通過附加事件到div.rating

Single Rating DEMO

更新多個等級的功能

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

Multiple rating DEMO

來源

2016-02-22 05:20:02

prevAll包括jQuery中的第一個元素

回答

相關問題