jQuery 按下时如何更改切换按钮文本？
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/16066115/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me):
StackOverFlow
How to change toggle button text when pressed?
提问by Rayray Silby
I would like to be able to press a button that says "hide" and then say "show" when the user clicks the button. In the code below the toggle part works, but now I need the "hide" text to turn to "show" once the content is hidden.
我希望能够按下一个显示“隐藏”的按钮，然后在用户单击该按钮时说“显示”。在下面的代码中，切换部分有效，但现在我需要“隐藏”文本一旦内容被隐藏就变成“显示”。
I took the toggle code from: http://thedesignspace.net/MT2archives/000298.html#.UW61YqKG33U
我从以下位置获取切换代码：http: //thedesignspace.net/MT2archives/000298.html#.UW61YqKG33U
<script type="text/javascript">
function toggle(element) {
document.getElementById(element).style.display = (document.getElementById(element).style.display == "none") ? "" : "none";
}
</script>
<div class="ISBody">
<h5>Header</h5>
<div class="ISTopLink"><a href="#ISTop">Return to Top</div>
<div class="ISHide"><a href="javascript:toggle('pos')">Hide Products - </a></div>
<hr>
<div id="pos" style="display: block;">
<div class="ISProductBody">
<div class="ISSubHead"><A HREF="#">Prodcut Name</A></div>
<div class="ISList">
<ul>
<li>Text here</li>
<li>Text here</li>
<li>Text here</li>
<li>Text here</li>
</ul>
</div>
</div>
</div>
回答by seaBass
Change your button code to something like this:
将您的按钮代码更改为如下所示：
<div class="ISHide" onclick="toggle(this)"><a href="#" >Hide Products</a></div>
And change your script to something like this
并将您的脚本更改为这样的内容
<script type="text/javascript">
function toggle (t) {
if (t.childNodes[0].innerHTML == "Hide Products") {
t.childNodes[0].innerHTML = "Show Products";
} else {
t.childNodes[0].innerHTML = "Hide Products";
}
}
</script>
回答by Rick Calder
Since your question is tagged jQuery, use jQuery:
由于您的问题被标记为 jQuery，请使用 jQuery：
<div class="ISHide"><a href="#" class="hideLink">Hide Products - </a></div>
$(".hideLink").on("click", function(){
if($(this).text()=="Hide Products - ")
{
$(this).text("Show Products - ");
} else {
$(this).text("Hide Products - ");
}
$(".ISProductBody").toggle();
return false;
});
Example: http://jsfiddle.net/calder12/KCj3r/
回答by Ricardo Andres
My "answer" is a modification of Rick Calder's answer. I used the code provided for a similar scenario, but it had HTML tags inside the button (in this case, Font Awesome icons). I figured it might help some people apply the solution to other situations.
我的“答案”是对 Rick Calder 答案的修改。我使用了为类似场景提供的代码，但它在按钮内有 HTML 标签（在本例中为 Font Awesome 图标）。我认为这可能会帮助某些人将解决方案应用于其他情况。
The only modifications I had to do was to change ".text" for ".html" and added ".addClass" / ".removeClass" to change the button styling. (CSS is not included since it is trivial here.)
我必须做的唯一修改是将“.text”更改为“.html”并添加“.addClass”/“.removeClass”以更改按钮样式。（CSS 不包括在内，因为它在这里是微不足道的。）
Here is the code I used:
这是我使用的代码：
$(".expand-button .button").on("click", function(){
if($(this).html()==" Watch Video <i class=\"fa fa-play\"></i> ")
{
$(this).html(" Hide Video <i class=\"fa fa-times\"></i> ");
$(this).addClass("secondary");
} else {
$(this).html(" Watch Video <i class=\"fa fa-play\"></i> ");
$(this).removeClass("secondary");
}
$(".expand-button-content").fadeToggle();
});
Thank you, Rick and the OP.
谢谢你，瑞克和 OP。
回答by Nipun Aggarwal
var button = document.querySelector(".button")
var text = document.querySelector(".text")
var t
button.addEventListener("click",function(){
if(text.textContent=="Like"){
t = "Liked"
}
else{
t="Like"
}
text.textContent=t;
})
This is an Example of a Like button which changes to Liked. The approach is really simple, if the text is Like, the variable t is set to "liked" and vice versa AND t then replaces the text content. Worked for me Cheers, :D
这是一个更改为 Liked 的 Like 按钮的示例。该方法非常简单，如果文本是 Like，则将变量 t 设置为“喜欢”，反之亦然，然后 t 替换文本内容。为我工作干杯，：D
回答by Aliza Khan
TextBox.innerHTML = " ";
ButtonId.onclick = function(){
if (TextBox.innerHTML == " ") {
TextBox.innerHTML = "HI";
}
else {
TextBox.innerHTML = " ";
}
}<a href="http://fbgadgets.blogspot.com/2014/01/link-change-into-button.html">ReadMore:</a>
<img id="ButtonId" src="https://www.w3schools.com/tags/smiley.gif" width="107" height="98">
<p id="TextBox"> </p>