0

我有以下 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 上，默认情况下 price-0 将替换为当前选定 li 的 id。

这是我的javascript。我希望 的类price-0更改ul为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..等

4

1 回答 1

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

于 2013-02-20T05:19:16.470 回答