2013-02-20 273 views
0

我有以下的HTML,我用它來流的價格範圍:jQuery的鼠標懸停值

<li class='voteable-attribute off clearfix' id='attributes_price_range'> 
      <label class='primary formField'>Price Range: 
      </label> 
        <fieldset id='price_choices'> 
     <legend class='offscreen'>Price Range:</legend> 
      <p class='offscreen'>Price per person:</p> 
     <ul class='clearfix price-0'> 
      <li> 
       <input type='radio' id='price-1' name='RestaurantsPriceRange2' value='1'>    <label for='price-1' class='offscreen'> 
        Cheap, Under $10 
       </label> 
      </li> 
      <li> 
       <input type='radio' id='price-2' name='RestaurantsPriceRange2' value='2'>    <label for='price-2' class='offscreen'> 
        Moderate, $11 - $30 
       </label> 
      </li> 
      <li> 
       <input type='radio' id='price-3' name='RestaurantsPriceRange2' value='3'>    <label for='price-3' class='offscreen'> 
        Spendy, $31 - $60 
       </label> 
      </li> 
      <li> 
       <input type='radio' id='price-4' name='RestaurantsPriceRange2' value='4'>    <label for='price-4' class='offscreen'> 
        Splurge, Over $61 
       </label> 
      </li> 
     </ul> 
    </fieldset> 
      <span class='no-js-hidden pseudoLink' id='price_tip' title='' style='cursor: auto;'>Price per person:</span> 
     <span class='no-js-hidden' id='price_range'>Roll over price, then click to vote </span> 
</li> 

這是我的js代碼,我們鼠標移到內UL任何華里UL類默認價格0將被替換爲當前選擇的li的id。

這是我的javascript。我希望ul的類price-0更改爲您懸停的li的ID。

$('#price_choices ul').mouseover(function(){ 
     var val = $(this).find('li input').attr('value'); 

     $(this).removeClass(/price-[a-zA-Z0-9_]*/g, ''); 
     $(this).addClass('price-'+val+''); 

    }); 

如何用指定的id替換classname?我當前的代碼只是增加了類和我結束了類的列表,看起來像這樣price-0 price-1 price-2..

+0

嘗試製作使用HTTP:// jsfiddle.net/ – ssilas777 2013-02-20 05:15:18

回答

2

嘗試:

$('#price_choices ul > li').mouseover(function(){ 
    var $li = $(this), 
    val = $li.find('input').val(); 
    //alert(val); 
    var preClass= $li.parents("ul").attr("class"); 
    $li.parents("ul").removeClass(preClass); 
    $li.parents("ul").addClass('price-'+val); 
}); 

演示:: jsFiddle

+0

nope不起作用,在第一個裏面它停止了..也val只保留在1 .. – d3bug3r 2013-02-20 05:20:47

+0

@zlippr檢查更新的代碼 – 2013-02-20 05:25:09

+0

偉大的感謝夥計! – d3bug3r 2013-02-20 05:27:40