jquery set previous div class

Question

我有一些jQuery將圖像設置爲星級評分系統的單選按鈕。我希望包含一個函數，當用戶點擊一個單選按鈕時，圖像會變化以進行檢查，並且之前的無線電也會更改爲已檢查。

我已經設法改變選中按鈕的類，我有一些代碼也會改變以前的按鈕類，但在更簡單的div結構。我已經能夠將兩者結合起來。

的代碼更改類單選按鈕

$(function() { 
    $('input:radio').each(function() { 
     $(this).hide(); 
     $('<a title=" check me " class="radio-fx '+this.name+'" href="#"><div class="radio"></div></a>').insertAfter(this); 
    }); 
    $('.radio-fx').live('click',function(e) { 
     e.preventDefault(); 
     $check = $(this).prev('input'); 
     var unique = '.'+this.className.split(' ')[1]+' div'; 
     $(unique).attr('class', 'radio'); 
     $(this).find('div').attr('class', 'radio-checked'); 
     $check.attr('checked', true); 
    }); 

}); 

HTML：

：我試圖整合設置以前的對懸停檢查

    <div class="voteGroup"> 
         <input type="radio" id="price_0" value="1" name="price" style="display: none;" checked="checked"> 
         <a href="#" class="radio-fx price" title=" check me "> 
          <div class="radio-checked"></div> 
         </a> 
         <input type="radio" id="price_1" value="2" name="price" style="display: none;" checked="checked"> 
         <a href="#" class="radio-fx price" title=" check me "> 
          <div class="radio"></div> 
         </a> 
         <input type="radio" id="price_2" value="3" name="price" style="display: none;" checked="checked"> 
         <a href="#" class="radio-fx price" title=" check me "> 
           <div class="radio"></div> 
         </a> 

        </div> 

代碼

 $('.radio-fx').hover(
      // Handles the mouseover 
      function() { 
       $(this).prevAll().andSelf().addClass('radio-checked'); 
       $(this).nextAll().removeClass('radio'); 
      }, 
      // Handles the mouseout 
      function() { 
       $(this).prevAll().andSelf().removeClass('radio'); 
      } 
     ); 

感謝您的幫助。

Answer 1

<div class="voteGroup"> 
    <input type="radio" id="price_0" value="1" name="price" style="display: none;" checked="checked"> 
    <a href="#" class="radio-fx price" title=" check me "> 
     <div class="radio"></div> 
    </a> 
    <input type="radio" id="price_1" value="2" name="price" style="display: none;" checked="checked"> 
    <a href="#" class="radio-fx price" title=" check me "> 
     <div class="radio"></div> 
    </a> 
    <input type="radio" id="price_2" value="3" name="price" style="display: none;" checked="checked"> 
    <a href="#" class="radio-fx price" title=" check me "> 
      <div class="radio"></div> 
    </a> 
</div> 
<style type="text/css"> 
    .radio-fx { float:left;margin:10px;} 
    .radio-fx .radio{ background:#ff0; width:20px; height:20px;} 
    .radio-checked .radio{ background:#f0f;} 
</style> 
<script type="text/javascript" src="../share/libs/jquery-1.7.min.js"></script> 
<script type="text/javascript"> 
$(function() { 
    $('.radio-fx').live("mouseenter", function() { // Handles the mouseover 
      var $self = $(this); 
      $self.addClass('radio-checked').prevAll().addClass('radio-checked'); 
      $self.nextAll().removeClass('radio-checked'); 
    }).live ("mouseout", function() { // Handles the mouseout 
      $(this).removeClass('radio').prevAll().removeClass('radio'); // what is this for? 
    }); 
}); 
</script> 

完整的測試代碼在這裏，有一個嘗試