2013-02-20 136 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