Jquery鼠标悬停值

Question

我有以下的html，我用它来评价价格范围：

<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类中的任何li上，默认情况下，将使用当前所选li的id替换price-0。

这是我的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替换类名？我当前的代码只是简单地添加了这个类，最后得到了一个类列表，如下所示，price-0 price-1 price-2..等等

Answer 1

尝试：

$('#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