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

但是請注意，這僅在默認情況下隱藏一個元素時才有效，否則，您將一次隱藏/顯示兩個元素。