javascript - 在 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() 即可。这将反转它们的显示状态。

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>