jQuery显示/隐藏货币

Question

我想在页面加载时仅显示前端的.price .amount（加拿大元价格）。点击“美元”后，.price将加载，同时隐藏.price .amount（加拿大元的价格）。我无法在HTML标记中将美元价格应用于美元价格，因为这是插件从WordPress加载的方式。

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

我是很新，web开发所以任何帮助，将不胜感激

$(document).ready(function() { 
 

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

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

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

<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>

Answer 1

可能是你可以做这样的事情：

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

Answer 2

想通了！但是，多亏了你，我进入了插件来添加跨班级。好极了！

<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>