jQuery基於星級的投票管理狀態

Question

我有以下jQuery功能，可以幫助我與基於星級的排名/投票。它工作得很好，我從教程中獲得了例子。當用戶選擇一個數字值存儲在服務器端的星號，然後如果他們回來了，星號的數量是「黃色」而不是「灰色」。唯一的錯誤是，當你在投票後回到它並開始在星空盤旋時，你選擇的原始星星不會保持「黃色」，但會變灰。

這裏是我的代碼，我爲它的長壽道歉：

 (function ($) { 
      $.fn.starFunction = function (stars, initialRating) { 
       //Save the jQuery object for later use. 
       var elements = this; 

       //Go through each object in the selector and create a ratings control. 
       return this.each(function() { 

        //Make sure intialRating is set. 

        if (!initialRating) 
         initialRating = 0; 

        //Save the current element for later use. 
        var containerElement = this; 

        //grab the jQuery object for the current container div 
        var container = jQuery(this); 

        //Create an array of stars so they can be referenced again. 
        var starsCollection = Array(); 

        //Save the initial rating. 
        containerElement.rating = initialRating; 

        //Set the container div's overflow to auto. This ensure it will      grow to 
        //hold all of its children. 
        container.css('overflow', 'auto'); 

        //create each star 
        for (var starIdx = 0; starIdx < stars; starIdx++) { 

         //Create a div to hold the star. 
         var starElement = document.createElement('div'); 

         //Get a jQuery object for this star. 
         var star = jQuery(starElement); 

         //Store the rating that represents this star. 
         starElement.rating = starIdx + 1; 

         //Add the style. 
         star.addClass('jquery-ratings-star'); 

         //Add the full css class if the star is beneath the initial rating. 
         if (starIdx < initialRating) { 
          star.addClass('jquery-ratings-full'); 
         } 

         //add the star to the container 
         container.append(star); 
         starsCollection.push(star); 

         //hook up the click event 
         star.click(function() { 
          //When clicked, fire the 'ratingchanged' event handler. Pass the rating through as the data argument. 
          elements.triggerHandler("ratingchanged", { rating: this.rating }); 
          containerElement.rating = this.rating; 
         }); 

         star.mouseenter(function() { 
          //Highlight selected stars. 
          for (var index = 0; index < this.rating; index++) { 
           starsCollection[index].addClass('jquery-ratings-full'); 
          } 
          //Unhighlight unselected stars. 
          for (var index = this.rating; index < stars; index++) { 
           starsCollection[index].removeClass('jquery-ratings-full'); 
          } 
         }); 

         container.mouseleave(function() { 
          //Highlight selected stars. 
          for (var index = 0; index < containerElement.rating; index++) { 
           starsCollection[index].addClass('jquery-ratings-full'); 
          } 
          //Unhighlight unselected stars. 
          for (var index = containerElement.rating; index < stars ; index++) { 
           starsCollection[index].removeClass('jquery-ratings-full'); 
          } 
         }); 
        } 
       }); 
      }; 
     })(jQuery); 

Answer 1

你可以使用：

star.unbind('mouseenter'); 
star.unbind('mouseleave'); 

在點擊事件，甚至：

$('.jquery-ratings-star').unbind('mouseenter'); 
$('.jquery-ratings-star').unbind('mouseleave'); 

http://api.jquery.com/unbind/