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>

如何根据选择的切换更改价格和配置？

谢谢：）

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

如何切换开关 - 价格和配置？

1 个答案: