javascript - 切换按钮标签上的文本

Question

我有一个显示隐藏表格行的功能，但现在想更改我的文本。

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

我想切换“显示/隐藏”文本。有什么想法吗？

Answer 1

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

或者，.toggle() 有一个 .toggle(even,odd);功能，使用对您来说最有意义的一种，一种是代码略短但可能不太明确。

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

注意:您可以根据需要在 function() 中包含您想要的任何其他操作，并且可以通过在其中调用 HideClick() 函数调用来消除标记/html 中的 onclick。正如我在第二个示例中演示的那样。

作为后续行动并提出替代方案，您可以将 CSS 类添加到您的 CSS

.hideStuff
{
display:none;
}

然后将其添加到:

.toggle('.hideStuff');

或者，更直接地说:在适当的地方。

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