在按鈕標籤上切換文本

我有一個show hide table rows功能，但現在想改變我的文本。在按鈕標籤上切換文本

<script language="javascript" type="text/javascript"> 

function HideStuff(thisname) { 
    tr = document.getElementsByTagName('tr');   
    for (i = 0; i < tr.length; i++) { 
     if (tr[i].getAttribute('classname') == 'display:none;') { 
      if (tr[i].style.display == 'none' || tr[i].style.display=='block') { 
       tr[i].style.display = ''; 
      } 
      else { 
       tr[i].style.display = 'block'; 
      } 
     } 
    } 
}

的HTML如下：...

<button id="ShowHide" onclick="HideStuff('hide');>Show/Hide</button>

我想切換「顯示/隱藏」的文本。有任何想法嗎？

來源

2010-02-18 MrM

使用jQuery這樣的事情可能工作：

$('ShowHide').click(function(){ 
    if ($('hide').css('display') == 'block') 
     $('ShowHide').val("Hide"); 
    else 
     $('ShowHide').val("Show"); 
});

我只是寫，從我的頭頂，因此你可能需要做一些改變，你可以閱讀更多關於css jquery api here。而我所做的只是使用匿名函數

來源

2010-02-18 15:40:35

他問的是如何更改按鈕標籤內的文本。 – 2010-02-18 16:05:43

那麼改變我的答案有多難呢？我只是想念。 – 2010-02-18 16:25:06

對不起，我沒想到會爲你編輯它。無論如何，downvote收回。 – 2010-02-18 16:31:43

不知道爲什麼你將這個名字傳入JS中，因爲這個名字目前沒有被使用。

如果更改呼叫：

<button id="ShowHide" onclick="HideStuff(this)">Show</button>

，然後在JS，你可以很容易改變文本：

if (this.value == 'Show') { 
    this.value = 'Hide' 
} 
else { 
    this.value = 'Show'; 
}

來源

2010-02-18 15:41:46

我會建議使用jQuery的，但你可以使用JavaScript的document.getElementById方法

在您的功能：

function HideStuff(thisname) { 
    tr = document.getElementsByTagName('tr'); 
    for (i = 0; i < tr.length; i++) { 
     if (tr[i].getAttribute('classname') == 'display:none;') { 
      if (tr[i].style.display == 'none' || tr[i].style.display == 'block') { 
       tr[i].style.display = 'none'; 

      } 
      else { 
       tr[i].style.display = 'block'; 

      } 
     } 
    } 
    if (document.getElementById("ShowHide").value == "show") { 
     document.getElementById("ShowHide").value = "hide"; 
    } 
    else { 
     document.getElementById("ShowHide").value = "show"; 
    } 

}

雖然，我可能會傳入this而不是函數調用中的文本'hide'。那麼你可以像zaph0d所說的那樣做。它有點清潔。

來源

2010-02-18 16:06:54 nbushnell

$('#HideShow').click(function() 
{ 
    if ($(this).text() == "Show") 
    { 
    $(this).text("Hide"); 
    } 
    else 
    { 
    $(this).text("Show"); 
    }; 
});

或者，.toggle（）有一個.toggle（偶數，奇數）;功能，使用哪個對你最有意義，一個是稍短的代碼，但可能不那麼明確。

$('#HideShow').toggle(function() 
    { 
    $(this).text("Hide"); 
    HideClick('hide'); 
    }, 
    function() 
    { 
    $(this).text("Show"); 
    HideClick('hide'); 
    } 
);

注意：您可以包括你想要的任何其他行動（）的函數根據需要，你可以致電HideClick（）函數調用在那裏消除標記/ HTML的onclick。正如我在第二個例子中演示的那樣。

作爲後續工作，並提出替代方案，您可以CSS類添加到您的CSS

.hideStuff 
{ 
display:none; 
}

然後補充一點：

.toggle('.hideStuff');

或者，更直接

：在適當的地方。

.addClass('.hideStuff'); 
.removeClass('.hideStuff');

來源

2010-02-18 16:33:01

在按鈕標籤上切換文本

回答

相關問題