[英]Toggle text on button tag
I have a show hide table rows feature but would now like to change my text. 我有一个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';
}
}
}
}
The html is as follows... html如下......
<button id="ShowHide" onclick="HideStuff('hide');>Show/Hide</button>
I want to toggle the "Show/Hide" text. 我想切换“显示/隐藏”文本。 Any ideas? 有任何想法吗?
$('#HideShow').click(function()
{
if ($(this).text() == "Show")
{
$(this).text("Hide");
}
else
{
$(this).text("Show");
};
});
Alternative, the .toggle() has an .toggle(even,odd); 另外,.toggle()有一个.toggle(偶数,奇数); functionality, use which ever makes most sense to you, one is slightly shorter code but perhaps less definitive. 功能,使用对你来说最有意义,一个是稍短的代码,但可能不那么明确。
$('#HideShow').toggle(function()
{
$(this).text("Hide");
HideClick('hide');
},
function()
{
$(this).text("Show");
HideClick('hide');
}
);
NOTE: you can include any other actions you want in the function() as needed, and you can eliminate the onclick in the markup/html by calling your HideClick() function call in there. 注意:您可以根据需要在函数()中包含所需的任何其他操作,并且可以通过调用其中的HideClick()函数调用来消除标记/ html中的onclick。 as I demonstrate in the second example. 正如我在第二个例子中演示的那样。
As a follow-up, and to present an alternative, you could add CSS class to your CSS 作为后续内容,并提供替代方案,您可以将CSS类添加到CSS中
.hideStuff
{
display:none;
}
THEN add this in: 然后将其添加到:
.toggle('.hideStuff');
or, more directly:in the appropriate place. 或者,更直接地:在适当的地方。
.addClass('.hideStuff');
.removeClass('.hideStuff');
Use jQuery something like this might work: 使用jQuery这样的东西可能会起作用:
$('ShowHide').click(function(){
if ( $('hide').css('display') == 'block' )
$('ShowHide').val("Hide");
else
$('ShowHide').val("Show");
});
I just wrote that from the top of my head though, so you might need to do some changes, you can read more about the css jquery api here . 我刚刚从头顶写了这个,所以你可能需要做一些修改,你可以在这里阅读更多关于css jquery api的内容 。 And all I did was using anonymous functions 我所做的就是使用匿名函数
I would recommend using jquery but you can just use javascript's document.getElementById
method 我建议使用jquery,但你可以使用javascript的document.getElementById
方法
in your function: 在你的功能:
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";
}
}
Although, I would probably pass in this
instead of the text 'hide' in the function call. 虽然,我可能会在函数调用中传入this
而不是文本'hide'。 then yon can do it like zaph0d stated. 那么你可以像zaph0d那样做。 Its a bit cleaner then. 它有点清洁了。
Not sure why you are passing thisname into the JS as this is not currently getting used. 不确定为什么要将此名称传递给JS,因为目前尚未使用它。
If you change the call to: 如果您将呼叫更改为:
<button id="ShowHide" onclick="HideStuff(this)">Show</button>
and then in the js you can change the text fairly easily: 然后在js中你可以很容易地改变文本:
if (this.value == 'Show') {
this.value = 'Hide'
}
else {
this.value = 'Show';
}
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.