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>

これらは、ul クラス内の任意の li にマウス オーバーする私の js コードです。デフォルトでは、price-0 は現在選択されている li の ID に置き換えられます。

これが私のjavascriptです。のクラスprice-0を、ホバーしulた の id に変更したい。li

$('#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 に答える