切换按钮标签上的文本

Question

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

我想切换"显示/隐藏"文本.有任何想法吗？

Answer 1

$('#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');

Answer 2

使用jQuery这样的东西可能会起作用:

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

我刚刚从头顶写了这个,所以你可能需要做一些修改,你可以在这里阅读更多关于css jquery api的内容.我所做的就是使用匿名函数