javascript - 使用切换状态切换按钮文本

Question

单击按钮时，该按钮应更改其文本。按钮本身会切换另一个元素。

function switchBtnText(btn, contentElement, contentText) {
  var stateText = contentElement.is(":hidden") ? "hide" : "show";
  contentText += " <b>" + stateText + "</b>";
  $(btn).html(contentText);
}

function toggleOne() {
  $("#p1").slideToggle();
  switchBtnText($("#btn1"), $("#p1"), "Text 1");
}

function toggleTwo() {
  $("#p2").slideToggle();
  switchBtnText($("#btn2"), $("#p2"), "Text 2");
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<button id="btn1" onclick="toggleOne()">Text 1 <b>hide</b></button>
<button id="btn2" onclick="toggleTwo()">Text 2 <b>hide</b></button>

<p id="p1">Text _ 1 _</p>
<p id="p2">Text _ 2 _</p>

所以第一次点击按钮就可以了。该按钮将其文本切换为“显示”。但是，当单击 agai(显示元素)时，它不会切换回“隐藏”文本。

我使用 contentElement.is(":hidden") 来检查元素是否隐藏或显示。

Answer 1

在使用.slideToggle()之前必须调用.is(":hidden")

function toggleOne() {
  var isVisible = $("#p1").is(":hidden");
  $("#p1").slideToggle();
  switchBtnText($("#btn1"), isVisible, "Text 1");
}

function switchBtnText(btn, isVisible, contentText) {
  var stateText = isVisible ? "hide" : "show";
  contentText += " <b>" + stateText + "</b>";
  $(btn).html(contentText);
}

function toggleOne() {
  var isVisible = $("#p1").is(":hidden");
  $("#p1").slideToggle();
  switchBtnText($("#btn1"), isVisible, "Text 1");
}

function toggleTwo() {
  var isVisible = $("#p2").is(":hidden");
  $("#p2").slideToggle();
  switchBtnText($("#btn2"), isVisible, "Text 2");
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<button id="btn1" onclick="toggleOne()">Text 1 <b>hide</b></button>
<button id="btn2" onclick="toggleTwo()">Text 2 <b>hide</b></button>

<p id="p1">Text _ 1 _</p>
<p id="p2">Text _ 2 _</p>