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

时间:2017-08-16 09:07:06

标签: javascript jquery html

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

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")检查元素是隐藏还是shwon。

2 个答案:

答案 0 :(得分:2)

在使用.is(":hidden")

之前,您必须致电.slideToggle()
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>

答案 1 :(得分:1)

您可以将slideToggle逻辑移至函数switchBtnText,以避免在所有toggleOnetoggleTwo函数中重复该代码...

在函数switchBtnText内,在contentText函数调用完成后更新slideToggle变量

最后更新按钮文字$(btn).html(contentText);

代码:

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

function toggleOne() {
  switchBtnText($('#btn1'), $('#p1'), 'Text 1');
}

function toggleTwo() {
  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>