JQUERY는 변경 가격 및 주문 링크를 토글합니다.

Question

다음을 시도해보십시오. 다음 쿼리를 사용하여 표시 가격을 변경하고 주문에 대한 직접 링크를 변경하십시오.

function changepricing() { 
    jQuery("#monthly").slideToggle(); 
    jQuery("#monthly1").slideToggle(); 
    jQuery("#montly2").slideToggle(); 
    jQuery("#monthly3").slideToggle(); 
    jQuery("#monthly4").slideToggle(); 
    jQuery("#halfyear").slideToggle(); 
    jQuery("#halfyear1").slideToggle(); 
    jQuery("#halfyear2").slideToggle(); 
    jQuery("#halfyear3").slideToggle(); 
    jQuery("#halfyear4").slideToggle(); 
    jQuery("#annual").slideToggle(); 
    jQuery("#annual1").slideToggle(); 
    jQuery("#annual2").slideToggle(); 
    jQuery("#annual3").slideToggle(); 
    jQuery("#annual4").slideToggle(); 
    jQuery("#biannual").slideToggle(); 
    jQuery("#biannual1").slideToggle(); 
    jQuery("#biannual2").slideToggle(); 
    jQuery("#biannual3").slideToggle(); 
    jQuery("#biannual4").slideToggle(); 
    jQuery("#prcmonthly1").slideToggle(); 
    jQuery("#prcmonthly2").slideToggle(); 
    jQuery("#prcmonthly3").slideToggle(); 
    jQuery("#prcmonthly4").slideToggle(); 
    jQuery("#prchalfyear1").slideToggle(); 
    jQuery("#prchalfyear2").slideToggle(); 
    jQuery("#prchalfyear3").slideToggle(); 
    jQuery("#prchalfyear4").slideToggle(); 
    jQuery("#prcannual1").slideToggle(); 
    jQuery("#prcannual2").slideToggle(); 
    jQuery("#prcannual3").slideToggle(); 
    jQuery("#prcannual4").slideToggle(); 
    jQuery("#prcbiannual1").slideToggle(); 
    jQuery("#prcbiannual2").slideToggle(); 
    jQuery("#prcbiannual3").slideToggle(); 
    jQuery("#prcbiannual4").slideToggle(); 
} 

쇼 변경 가격 코드

인가 :

이

 <li id="monthly1" class="pricing_header2" style="display:block;">&euro;1 <span>/1 mo.</span></li> 
     <li id="halfyear1" class="pricing_header2" style="display:none;">&euro;2 <span>/6 mos.</span></li> 
     <li id="annual1" class="pricing_header2" style="display:none;">&euro;3 <span>/One yr.</span></li> 
     <li id="biannual1" class="pricing_header2" style="display:none;">&euro;4 <span>/Two yrs.</span></li> 

     <li id="prcmonthly1" class="pricing_footer" style="display:block;"><span><a href="link1" class="pricing_button">{$LANG.product_buy_now}</a></li> 
     <li id="prchalfyear1" class="pricing_footer" style="display:none;"><span><a href="link2" class="pricing_button">{$LANG.product_buy_now}</a></li> 
     <li id="prcannual1" class="pricing_footer" style="display:none;"><span><a href="link3" class="pricing_button">{$LANG.product_buy_now}</a></li> 
     <li id="prcbiannual1" class="pricing_footer" style="display:none;"><span><a href="link4" class="pricing_button">{$LANG.product_buy_now}</a></li> 

위의 코드 잘 작동 난 단지 사용하는 경우 : 표시 가격과 주문 링크는

<li id="monthly" class="pricing_header2" style="display:block;"><a href="#" onclick="changepricing();return false;"><span>1 Month </span></a></li> 
    <li id="halfyear" class="pricing_header2" style="display:none;"><a href="#" onclick="changepricing();return false;"><span>6 Months </span></a></li> 
    <li id="annual" class="pricing_header2" style="display:none;"><a href="#" onclick="changepricing();return false;"><span>{$LANG.product_choose_one} </span></a></li> 
    <li id="biannual" class="pricing_header2" style="display:none;"><a href="#" onclick="changepricing();return false;"><span>{$LANG.product_choose_two} </span></a></li> 

2 개 제품은 3 개 또는 4 개 제품을 사용하면 작동하지 않습니다. 어떤 도움을 줄 수 있습니까? 정말 고마워.

감사합니다, 마누엘

Answer 1

우와!

나는 토글-수있는 항목에 대한 (예 : <li class='pricing_header2 toggleable'>을)를 다른 클래스를 넣고 사용하여이 대신 코드를 JS 제안 수 :

$('.toggleable').slideToggle(); 

Answer 2

정말이야보다 각 제품에 대해 그 div의 세트가있는 경우 그것이 2 개의 똥을 위해 어떻게 작동하는지 방황하고 있냐? Mikael Härsjö가 말했듯이, 항목 목록을 사용하여 작업 할 때는 ID 대신 클래스를 사용합니다. 더 많은 div id = "foo"를 가질 수는 없지만 무제한 div class = "foo"를 가질 수 있습니다.

그래서,이 기능을 긁어 관리 :

function changepricing(_from, _to) { 
    for(i=0; i<=4; i++) { 
    if(i == 0) { 
     nr = ''; 
    } 
    else { 
     nr = i; 
    } 
    jQuery("#"+_from+nr).slideToggle(); 
    jQuery("#"+_to+nr).slideToggle(); 
    } 
} 

은 당신이 전화를 걸해야 작동하도록하기 위해이 같은 :

<li id="monthly" class="pricing_header2" style="display: block;"> 
    <a onclick="changepricing('monthly', 'halfyear');return false;" href="#"> 
    <span>1 Month </span> 
    </a> 
</li>