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 here的内容。我所做的只是使用匿名函数

Answer 3

我建议使用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那样做。它比较干净。

Answer 4

不确定为什么要将此名称传递给JS，因为目前尚未使用它。

如果您将通话更改为：

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

然后在js中你可以很容易地改变文字：

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

切换按钮标签上的文本

4 个答案: