按下时如何更改切换按钮文本？

我希望能够按下一个显示“隐藏”的按钮，然后在用户单击按钮时说“显示”。 在下面的代码中，切换部分可以正常工作，但是现在我需要隐藏“隐藏”文本，以便在隐藏内容后转向“显示”。

我从以下网站获取了切换代码： http ： //thedesignspace.net/MT2archives/000298.html#.UW61YqKG33U

 function toggle(element) { document.getElementById(element).style.display = (document.getElementById(element).style.display == "none") ? "" : "none"; }  
 
Header
 
Return to Top
 
Hide Products - 
 
 
 
 
Prodcut Name
 
 
 
Text here
 
Text here
 
Text here
 
Text here
 
 
 
  

Answer 1

将您的按钮代码更改为以下内容：

 
Hide Products 

并将您的脚本更改为此类似的内容

Answer 2

由于您的问题标记为jQuery，请使用jQuery：

 
Hide Products - 
 $(".hideLink").on("click", function(){ if($(this).text()=="Hide Products - ") { $(this).text("Show Products - "); } else { $(this).text("Hide Products - "); } $(".ISProductBody").toggle(); return false; }); 

示例： http ： //jsfiddle.net/calder12/KCj3r/

Answer 3

我的“回答”是Rick Calder答案的修改。 我使用了为类似场景提供的代码，但它在按钮内部有HTML标签（在本例中为Font Awesome图标）。 我认为这可能有助于某些人将解决方案应用于其他情况。

我必须做的唯一修改是将“.text”更改为“.html”并添加“.addClass”/“。removeClass”来更改按钮样式。 （CSS不包括在内，因为它在这里是微不足道的。）

这是我使用的代码：

 $(".expand-button .button").on("click", function(){ if($(this).html()==" Watch Video  ") { $(this).html(" Hide Video  "); $(this).addClass("secondary"); } else { $(this).html(" Watch Video  "); $(this).removeClass("secondary"); } $(".expand-button-content").fadeToggle(); }); 

谢谢Rick和OP。

Answer 4

 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; }) 

这是一个Like按钮的示例，它更改为Liked。 方法非常简单，如果文本是Like，则变量t设置为“likes”，反之亦然，然后替换文本内容。 为我工作干杯，：D

Answer 5

 TextBox.innerHTML = " "; ButtonId.onclick = function(){ if (TextBox.innerHTML == " ") { TextBox.innerHTML = "HI"; } else { TextBox.innerHTML = " "; } } 

 ReadMore: