在按钮标签上切换文本

我有一个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

在按钮标签上切换文本

回答

相关问题