如何切換開關 - 價格和配置？

Question

需要你的幫助：

根據http://ghinda.net/css-toggle-switch/你可以使用開關。閱讀（如我'不是一個完整的專家）之後我怎麼能根據定義改變我的價格：

 <div class="switch-toggle switch-5 switch-candy yellow"> 
     <input id="alusa" name="view" type="radio" checked> 
     <label for="alusa" onclick="">USA</label> 

     <input id="aluk" name="view" type="radio"> 
     <label for="aluk" onclick="">UK</label> 

     <input id="alin" name="view" type="radio"> 
     <label for="alin" onclick="">India</label> 

     <input id="altr" name="view" type="radio"> 
     <label for="altr" onclick="">Turquia</label> 

     <input id="alhk" name="view" type="radio"> 
     <label for="alhk" onclick="">Hong-Kong</label> 

     <a class="btn btn-primary"></a> 
    </div> 

      <div class="title">Economy</div> 
      <div id="alusa" onclick="" checked class="price">$3.99 <i>/ per month</i></div> 
      <div id="aluk" onclick="" class="price">$6.99 <i>/ per month</i></div> 
      <div id="alin" onclick="" class="price">$6.99 <i>/ per month</i></div> 
      <div id="altr" onclick="" class="price">$6.99 <i>/ per month</i></div> 
      <div id="alhk" onclick="" class="price">$6.99 <i>/ per month</i></div> 

我怎樣才能改變價格和CONFIGS雅閣切換選擇？

謝謝:)

Answer 1

我從價格DIV中刪除了ID，以擺脫重複的ID。我將這些ID移到了課程中，以便同一課程可以用於不同產品的價格。然後，我使用jQuery僅顯示其課程與當前選定單選按鈕的ID相匹配的價格。

HTML：

  <div class="switch-toggle switch-5 switch-candy"> 
      <input id="alusa" name="view" type="radio" checked> 
      <label for="alusa" onclick="">USA</label> 

      <input id="aluk" name="view" type="radio"> 
      <label for="aluk" onclick="">UK</label> 

      <input id="alin" name="view" type="radio"> 
      <label for="alin" onclick="">India</label> 

      <input id="altr" name="view" type="radio"> 
      <label for="altr" onclick="">Turquia</label> 

      <input id="alhk" name="view" type="radio"> 
      <label for="alhk" onclick="">Hong-Kong</label> 

      <a class="btn btn-primary"></a> 
     </div> 

      <div class="clearfix mar_top3"></div> 

      <div class="pricing-tables-two"> 
       <div class="title">Economy</div> 
       <div class="price alusa">$3.99 <i>/ per month</i></div> 
       <div class="price aluk">$6.99 <i>/ per month</i></div> 
       <div class="cont-list"> 


         <ul> 
         <li>Unlimited Bandwidth</li> 
         <li>100 GB Space</li> 
         <li>10 Databases</li> 
         <li>Ad Credits</li> 
         <li>1 Free Domain</li> 
         <li>24/7 Unlimited Support</li> 
         <li class="last">100 Email Addresses</li> 
        </ul> 
       </div> 
       <div class="ordernow"><a href="#" class="button darkgray small align">Order Now</a></div> 
      </div><!-- end section --> 

JS：

$(function() { 
    $(".price:not(.alusa)").hide(); 
    $(":radio[name=view]").change(function() { 
     $(".price").hide(); 
     $(".price." + this.id).show(); 
    }); 
}); 

Updated fiddle