jquery懸停圖像點擊時的圖像問題

Question

我遇到的問題是，當我點擊所需的圖像評級時，我不能顯示較低的評級圖像，當我點擊所需的評級後，將鼠標懸停在它們上面。

例如，可以說我點擊了3顆星的評級圖片我可以懸停並顯示4星和5星的評級圖片，而不點擊它們，但是當我將鼠標懸停在圖片上時，我無法顯示圖片星級評分1和2他們點擊了3星評級圖片後。

HTML

<form method="post" id="rating-form"> 
    <fieldset> 
     <ol> 
      <li> 
       <ul class="rating-pick notrated"> 
        <li id="rate-1" data-desc="Bad"> 
         <label for="rating-1"><input type="radio" value="1" name="rating" id="rating-1" />1 star</label> 
        </li> 
        <li id="rate-2" data-desc="Good"> 
         <label for="rating-2"><input type="radio" value="2" name="rating" id="rating-2" />2 stars</label> 
        </li> 
        <li id="rate-3" data-desc="Great"> 
         <label for="rating-3"><input type="radio" value="3" name="rating" id="rating-3" />3 stars</label> 
        </li> 
        <li id="rate-4" data-desc="Better"> 
         <label for="rating-4"><input type="radio" value="4" name="rating" id="rating-4" />4 stars</label> 
        </li> 
        <li id="rate-5" data-desc="Best"> 
         <label for="rating-5"><input type="radio" value="5" name="rating" id="rating-5" />5 stars</label> 
        </li> 
       </ul> 
       <div class="rate" data-desc="Rate this product">Rate this product</div> 
      </li> 
     </ol> 
    </fieldset> 
</form> 

jQuery的

$(document).ready(function() { 
    $('.rating-pick li') 
    .on('mouseenter touchstart', function(){ 
     var classSuffix = $(this).find('input').attr('id').split('-')[1]; 
     $('.rating-pick').prevAll().addBack().addClass('rating-' + classSuffix); 
     $('.rating-pick').nextAll().removeClass('notrated'); 
     $('.rate').text($(this).data('desc')); 
    }) 
    .on('mouseleave touchend', function(){   
     var classSuffix = $(this).find('input').attr('id').split('-')[1]; 
     $('.rating-pick').prevAll().addBack().removeClass('rating-' + classSuffix); 
     $('.rate').text($('.rate').attr('data-desc')); 
    }) 
    .on('change click', function(e){ 
     e.preventDefault(); 
     e.stopPropagation(); 
     $('.rate').attr('data-desc', $(this).attr('data-desc')); 
     var classSuffix = $(this).find('input').attr('id').split('-')[1]; 
     $('ul.rating-pick').removeClass().addClass('rating-pick rating-' + classSuffix); 
     $(this).off('mouseenter touchstart mouseleave touchend'); 
    }); 
}); 

CSS

*{ 
    margin: 0; 
    padding: 0; 
    border: 0; 
} 

#rating-form ol li{ 
    list-style: none; 
    width: 100%; 
    float: left; 
} 

#rating-form label{ 
    display: inline-block; 
    margin-bottom: 0.2em; 
    font-weight: bold; 
    width: 100%; 
} 

.rate{ 
    float: left; 
    width: 100%; 
    margin: -1.4em 0 1.8em 0; 
} 

.rating-pick{ 
    width: 150px; 
    height: 30px; 
    float: left; 
    margin-bottom: 1.8em; 
} 

.notrated{ 
    background-image: url('http://s8.postimg.org/xgfpw2679/stars.png'); 
    background-repeat: repeat-x; 
    background-position: 0px 0px; 
} 


.rating-1{ 
    background-image: url('http://s8.postimg.org/xgfpw2679/stars.png'); 
    background-repeat: repeat-x; 
    background-position: 0px -60px; 
} 

.rating-2{ 
    background-image: url('http://s8.postimg.org/xgfpw2679/stars.png'); 
    background-repeat: repeat-x; 
    background-position: 0px -120px; 
} 

.rating-3{ 
    background-image: url('http://s8.postimg.org/xgfpw2679/stars.png'); 
    background-repeat: repeat-x; 
    background-position: 0px -180px; 
} 

.rating-4{ 
    background-image: url('http://s8.postimg.org/xgfpw2679/stars.png'); 
    background-repeat: repeat-x; 
    background-position: 0px -240px; 
} 

.rating-5{ 
    background-image: url('http://s8.postimg.org/xgfpw2679/stars.png'); 
    background-repeat: repeat-x; 
    background-position: 0px -300px; 
} 

.rating-pick input[type="radio"], .rating-pick label{ 
    height: 0 !important; 
    display: none !important; 
} 

.rating-pick li{ 
    float: left !important; 
    width: 30px !important; 
    height: 30px !important; 
    display: block !important; 
    list-style-type: none !important; 
    cursor: pointer !important; 
} 

這裏是行動http://jsfiddle.net/pt20141d/1/

Answer 1

我添加了一個變量，這是最後的代碼：

$(document).ready(function() { 
    var rating; 
     $('.rating-pick li') 
     .on('mouseenter touchstart', function() { 
      var classSuffix = $(this).find('input').attr('id').split('-')[1]; 
      $('.rating-pick').prevAll().addBack().addClass('rating-' + classSuffix); 
      $('.rating-pick').nextAll().removeClass('notrated'); 
      $('.rate').text($(this).data('desc')); 


     rating = $('.rating-pick').attr("class").split(" ")[1]; 
     $('.rating-pick').removeClass(rating); 
     }) 
     .on('mouseleave touchend', function() { 
      var classSuffix = $(this).find('input').attr('id').split('-')[1]; 
      $('.rating-pick').prevAll().addBack().removeClass('rating-' + classSuffix); 
      $('.rate').text($('.rate').attr('data-desc')); 

     $('.rating-pick').addClass(rating); 
     }) 
     .on('change click', function(e) { 
      e.preventDefault(); 
      e.stopPropagation(); 
      $('.rate').attr('data-desc', $(this).attr('data-desc')); 
      var classSuffix = $(this).find('input').attr('id').split('-')[1]; 
      $('ul.rating-pick').removeClass().addClass('rating-pick rating-' + classSuffix); 
      $(this).off('mouseenter touchstart mouseleave touchend'); 
     }); 
    }); 

Here is the JSFiddle demo

（和this one is for fun：d）

Answer 2

這爲你工作正常的鏈接代碼。

$(document).ready(function() { 
 
    var rating; 
 
     $('.rating-pick li') 
 
     .on('mouseenter touchstart', function() { 
 
      var classSuffix = $(this).find('input').attr('id').split('-')[1]; 
 
      $('.rating-pick').prevAll().addBack().addClass('rating-' + classSuffix); 
 
      $('.rating-pick').nextAll().removeClass('notrated'); 
 
      $('.rate').text($(this).data('desc')); 
 

 

 
     rating = $('.rating-pick').attr("class").split(" ")[1]; 
 
     $('.rating-pick').removeClass(rating); 
 
     }) 
 
     .on('mouseleave touchend', function() { 
 
      var classSuffix = $(this).find('input').attr('id').split('-')[1]; 
 
      $('.rating-pick').prevAll().addBack().removeClass('rating-' + classSuffix); 
 
      $('.rate').text($('.rate').attr('data-desc')); 
 

 
     $('.rating-pick').addClass(rating); 
 
     }) 
 
     .on('change click', function(e) { 
 
      e.preventDefault(); 
 
      e.stopPropagation(); 
 
      $('.rate').attr('data-desc', $(this).attr('data-desc')); 
 
      var classSuffix = $(this).find('input').attr('id').split('-')[1]; 
 
      $('ul.rating-pick').removeClass().addClass('rating-pick rating-' + classSuffix); 
 
      $(this).off('mouseenter touchstart mouseleave touchend'); 
 
     }); 
 
    });

*{ 
 
    margin: 0; 
 
    padding: 0; 
 
    border: 0; 
 
} 
 

 
#rating-form ol li{ 
 
    list-style: none; 
 
    width: 100%; 
 
    float: left; 
 
} 
 

 
#rating-form label{ 
 
\t display: inline-block; 
 
\t margin-bottom: 0.2em; 
 
\t font-weight: bold; 
 
\t width: 100%; 
 
} 
 

 
.rate{ 
 
\t float: left; 
 
\t width: 100%; 
 
\t margin: -1.4em 0 1.8em 0; 
 
} 
 

 
.rating-pick{ 
 
\t width: 150px; 
 
\t height: 30px; 
 
\t float: left; 
 
\t margin-bottom: 1.8em; 
 
} 
 

 
.notrated{ 
 
\t background-image: url('http://s8.postimg.org/xgfpw2679/stars.png'); 
 
\t background-repeat: repeat-x; 
 
\t background-position: 0px 0px; 
 
} 
 

 

 
.rating-1{ 
 
\t background-image: url('http://s8.postimg.org/xgfpw2679/stars.png'); 
 
\t background-repeat: repeat-x; 
 
\t background-position: 0px -60px; 
 
} 
 

 
.rating-2{ 
 
\t background-image: url('http://s8.postimg.org/xgfpw2679/stars.png'); 
 
\t background-repeat: repeat-x; 
 
\t background-position: 0px -120px; 
 
} 
 

 
.rating-3{ 
 
\t background-image: url('http://s8.postimg.org/xgfpw2679/stars.png'); 
 
\t background-repeat: repeat-x; 
 
\t background-position: 0px -180px; 
 
} 
 

 
.rating-4{ 
 
\t background-image: url('http://s8.postimg.org/xgfpw2679/stars.png'); 
 
\t background-repeat: repeat-x; 
 
\t background-position: 0px -240px; 
 
} 
 

 
.rating-5{ 
 
\t background-image: url('http://s8.postimg.org/xgfpw2679/stars.png'); 
 
\t background-repeat: repeat-x; 
 
\t background-position: 0px -300px; 
 
} 
 

 
.rating-pick input[type="radio"], .rating-pick label{ 
 
\t height: 0 !important; 
 
\t display: none !important; 
 
} 
 

 
.rating-pick li{ 
 
\t float: left !important; 
 
\t width: 30px !important; 
 
\t height: 30px !important; 
 
\t display: block !important; 
 
\t list-style-type: none !important; 
 
\t cursor: pointer !important; 
 
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.10.1/jquery.min.js"></script> 
 
<form method="" action="" id="rating-form"> 
 
    <fieldset> 
 
     <ol> 
 
      <li> 
 
       <ul class="rating-pick notrated"> 
 
        <li id="rate-1" data-desc="Bad"> 
 
         <label for="rating-1"><input type="radio" value="1" name="rating" id="rating-1" />1 star</label> 
 
        </li> 
 
        <li id="rate-2" data-desc="Good"> 
 
         <label for="rating-2"><input type="radio" value="2" name="rating" id="rating-2" />2 stars</label> 
 
        </li> 
 
        <li id="rate-3" data-desc="Great"> 
 
         <label for="rating-3"><input type="radio" value="3" name="rating" id="rating-3" />3 stars</label> 
 
        </li> 
 
        <li id="rate-4" data-desc="Better"> 
 
         <label for="rating-4"><input type="radio" value="4" name="rating" id="rating-4" />4 stars</label> 
 
        </li> 
 
        <li id="rate-5" data-desc="Best"> 
 
         <label for="rating-5"><input type="radio" value="5" name="rating" id="rating-5" />5 stars</label> 
 
        </li> 
 
       </ul> 
 
       <div class="rate" data-desc="Rate this product">Rate this product</div> 
 
      </li> 
 
     </ol> 
 
    </fieldset> 
 
</form>