按下時如何更改切換按鈕文本？

Question

我希望能夠按下一個顯示“隱藏”的按鈕，然后在用戶單擊該按鈕時說“顯示”。 在下面的代碼中，切換部分有效，但現在我需要“隱藏”文本在內容被隱藏后變為“顯示”。

我從以下位置獲取了切換代碼： 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>

Answer 1

將您的按鈕代碼更改為如下所示：

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

Answer 2

由於您的問題被標記為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/

Answer 3

我的“答案”是對Rick Calder答案的修改。 我使用了為類似情況提供的代碼，但是按鈕內有HTML標記（在本例中為Font Awesome圖標）。 我認為這可能有助於某些人將解決方案應用於其他情況。

我要做的唯一修改是將“ .html”更改為“ .text”，並添加了“ .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();
});

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

這是一個“喜歡”按鈕的示例，該按鈕更改為“喜歡”。 該方法非常簡單，如果文本為“喜歡”，則將變量t設置為“喜歡”，反之亦然，然后用t替換文本內容。 為我工作干杯，：D

Answer 5

 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> 

Answer 6

下面顯示了在 function 頂部被切換的按鈕文本。為了簡潔起見，它使用了 Javasript 三元運算符。 如果有必要，它還允許您循環瀏覽兩個以上的文本標簽。 如果僅切換兩個值，則labels中 label 值的順序無關緊要。

$(".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'