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>

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

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

2 个答案: