Question

我试图在页面加载时仅显示前端的.price .amount（加拿大元价格）。点击＆＃34; USD＆＃34;后，.price将加载，同时隐藏.price .amount（加拿大元价格）。我不能在html标记中将类应用于USD价格，因为它是从WordPress加载插件的方式。

显示美元价格时，＆＃34; CAD＆＃34;文本将显示但不是加拿大元价格，允许访客点击它以显示.price .amount（加拿大元价格），同时隐藏美元价格。所以基本上我需要一个显示而另一个不显示（加拿大价格首先在页面加载时显示）。

我对网络开发很陌生，所以任何帮助都会受到赞赏

＆＃13;

$(document).ready(function() {

  $(".price .amount").show();

  $(".CAD").click(function() {
    $(".price").hide();
    $(".price .amount").slideToggle("slow");
  });

  $(".USD").click(function() {
    $(".price .amount").hide();
    $(".price").slideToggle("slow");
  });
});

＆＃13;

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.10.1/jquery.min.js"></script>

<p class="price" style="display: none;">
  <span class="amount" style="display: inline;">
      $ 13,500
  </span>
  <br />
  <span class="newAmount">
      USD 10395.00
  </span>
</p>
<div class="CAD">
  <h1>CAD</h1>
</div>
<div class="USD">
  <h1>USD</h1>
</div>

＆＃13;

Answer 1

想出来！但是多亏了你，我进入插件添加了span类。耶！

<script type="text/javascript">
        $(document).ready(function() {

            $(".price .amount").show();
            $(".price .newAmount").hide();

            $(".CAD").click(function(){
                $(".price .newAmount").hide();
                $(".price .amount").slideToggle("slow");
                e.preventDefault();
            });

            $(".USD").click(function() {
                $(".price .amount").hide();
                $(".price .newAmount").slideToggle("slow");
            });
        });
    </script>

Answer 2

可能你可以这样做：

<强> HTML

    <p class="price canadianamount" style="">
      <span class="amount canadian" style="display: inline;">
                $ 13,500
            </span>
    </p>
<p class='american'>
            <span class='us'> USD 10395.00 </span>
</p>
    <div class="CAD">
      <h1>CAD</h1>
    </div>
    <div class="USD">
      <h1>USD</h1>
    </div>

<!-- end snippet -->

将其保存在sepaarte <p>标记

中

    $(document).ready(function() {
     $('.canadianamount,.american').hide();
      $(".CAD").click(function() {
        $(".american").hide();
        $(".canadianamount").slideToggle("slow");
      });

      $(".USD").click(function() {
        $(".canadianamount").hide();
        $(".american").slideToggle("slow");
      });
    });

查看 JS Fiddle

jQuery显示/隐藏货币

2 个答案: