使用jQuery中的一个按钮隐藏/显示div

Question

我试图隐藏一个元素，当单击按钮时显示另一个元素，并在再次单击时切换。

我想出了类似的东西，但是这行不通...

 jQuery("#wcvat-toggle").click(function() { jQuery("#excltaxout").show(); jQuery("#incltaxout").hide(); }); 

 <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script> <a id="wcvat-toggle"> <span id="incltaxout">Including Tax</span> <span id="excltaxout">Excluding Tax</span> </a> 

但是，这将始终显示#excltaxout 。 有什么建议么？

Answer 1

为了使这项工作有效-并假设其中一个元素开始隐藏-您可以简单地同时在两个元素上调用toggle() 。 这将反转其display状态。

 jQuery(function($) { $("#wcvat-toggle").click(function() { $("#excltaxout, #incltaxout").toggle(); }); }); 

 #excltaxout { display: none; } 

 <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script> <a id="wcvat-toggle"> <span id="incltaxout">Including Tax</span> <span id="excltaxout">Excluding Tax</span> </a> 

Answer 2

您可以使用jQuery的.toggle() ：

显示或隐藏匹配的元素。

 $("#wcvat-toggle").click(() => { $("#incltaxout").toggle(); $("#excltaxout").toggle(); }); 

 #incltaxout {display:none} 

 <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> <a id="wcvat-toggle"> <span id="incltaxout">Including Tax</span> <span id="excltaxout">Excluding Tax</span> </a> 

但是请注意，这仅在默认情况下隐藏一个元素时才有效，否则，您将一次隐藏/显示两个元素。