2013-02-20 3 views
0

I가 내가 속도의 가격 범위에 사용하는 다음과 같은 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로 대체된다.

내 자바 스크립트입니다. ulprice-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..

+0

HTTP를 활용하십시오 : // jsfiddle.net/ – ssilas777

답변

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

아니요, 첫 번째 리가 멈춘 후에도 작동하지 않습니다 .. 또한 1에 머물러 있습니다. – d3bug3r

+0

@zlippr 업데이트 된 코드 확인 –

+0

대단한 감사 친구 !! – d3bug3r

관련 문제