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

我希望能夠按下「隱藏」按鈕，然後在用戶單擊按鈕時說「顯示」。在下面的代碼中，切換部分可以工作，但是現在我需要隱藏內容後「隱藏」文本才能轉爲「顯示」。如何在按下時更改切換按鈕文本？

我把撥動代碼：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>

來源

2013-04-17 Rayray Silby

你的頭標記中包含jQuery嗎？如果是這樣，你可以使用.toggle（）更簡單的方式做到這一點http://api.jquery.com/toggle/ –

你的HTML是相當搞砸的... – excentris

我知道這是搞砸了。做這個代碼的人把它扔在我身上，用「讓這個隱藏的文字說節目。好運！」 –

更改您的按鈕代碼爲類似這個：

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

來源

2013-04-17 17:41:29 seaBass

按鈕更改（YAY！），但切換關閉。我放回了原始代碼：查看切換是否會重新開啓 - 它所做的 - 但後來又回到不改變文本。我想我必須再多處理一下，但文字DID會改變，這是朝正確方向邁出的一步！ –

看看這對你是否更好。我在我的答案中更改了代碼。 – seaBass

不，ul標籤沒有消失;這是一個鏈接，並仍然顯示/隱藏這是一個好兆頭。 :) –

由於您的問題是標籤的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/

來源

2013-04-17 17:39:52

我的「答案」是裏克·考爾德的回答修改。我使用了爲類似場景提供的代碼，但它在按鈕內部有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(); 
});

謝謝你，裏克和OP。

來源

2015-12-21 15:10:55

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按鈕，其改變到喜歡的實施例。該方法非常簡單，如果文本是Like，變量t被設置爲「喜歡」，反之亦然，然後替換文本內容。工作對我歡呼聲，：D

來源

2017-07-24 05:09:51

添加一些解釋和回答這個答案如何幫助OP在解決當前問題 –

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

回答

相關問題