代码之家 › 专栏 › 技术社区 › Rayray Silby

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

togglebutton toggle jquery javascript

Rayray Silby · 技术社区 · 13 年前

我希望能够按下一个写着“隐藏”的按钮,然后在用户点击按钮时说“显示”。在下面的代码中,切换部分是有效的,但现在我需要“隐藏”文本来在内容隐藏后转为“显示”。

我从以下位置获取了切换代码: 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>

6 回复 | 直到 13 年前

seaBass 13 年前

将按钮代码更改为如下内容:

<div class="ISHide" onclick="toggle(this)"><a href="#" >Hide Products</a></div>

把你的剧本改成这样

<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>

Rick Calder 13 年前

由于您的问题被标记为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;
});

例子: http://jsfiddle.net/calder12/KCj3r/

Ricardo Andres 10 年前

我的“答案”是对里克·卡尔德答案的修改。我使用了为类似场景提供的代码,但它在按钮内有HTML标记(在本例中是Font Awesome图标)。我认为这可能有助于一些人将解决方案应用于其他情况。

我所要做的唯一修改是将“.text”改为“.html”,并添加“.addClass”/“.removeClass”来更改按钮样式。(CSS不包括在内,因为它在这里很琐碎。)

这是我使用的代码:

$(".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();
});

谢谢你,瑞克和医生。

Nipun Aggarwal 8 年前

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,变量t被设置为“Like”,反之亦然,然后t替换文本内容。为我工作干杯 :天

Aliza Khan 7 年前

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>

Dan Swain 4 年前

下面显示了在功能顶部清晰切换的按钮文本。为了简洁起见,它使用了Javasript三元运算符。如果必要的话,它还允许您循环浏览两个以上的文本标签。如果只切换两个值,则中标签值的顺序 labels 无关紧要。

$(".expand-button .button").on("click", function(e){
  const labels = ['Show', 'Hide']
  let idx = labels.indexOf(e.target.innerHTML) + 1
  idx == labels.length ? idx = 0 : idx
  e.target.innerHTML = labels[idx]
});

如果只切换两个值,则只使用三元运算符的更短的解决方案:

    e.target.innerHTML == 'Show' ? e.target.innerHTML == 'Hide' : e.target.innerHTML == 'Show'