单击按钮时,此按钮应更改其文本。按钮本身切换另一个元素。
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。
答案 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
,以避免在所有toggleOne
和toggleTwo
函数中重复该代码...
在函数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>