切换html值

Question

  

可能重复：
  Toggle button and Toggle visibility

我在页面上有一段文字作为按钮，

<span class="button">Show Activities</span>

当你点击它时，它隐藏或显示一些HTML。我想改变它的html，所以我尝试了这个

$('.button').click(function() {
    $(this).siblings('.overview').slideToggle('slow');
    $(this).html("<span>Hide activities</span>")
});

它改变了html的文本，但是当我再次点击它时我希望它改回来。有没有像切换这样的功能，但是要将html放回到开头？

Answer 1

我相信你想到的选择器是span的“innerHTML”，你可以在完成显示文本后在javascript中更改，以便“Show Activities”更改为“Hide Activities”，然后只是写一个与“Show Activities”代码完全相反的小函数。 ：）

<span class="button" id="hideShow">Show Activities</span>

然后在你的javascript中：

var elem = document.getElementById('hideShow');
elem.innerHTML = "Hide Activities";

Answer 2

我认为这可以帮到你

http://www.wikihow.com/Toggle-HTML-Display-With-JavaScript

var textHidden = true;
function toggle() {
var ele = document.getElementById("toggleText");
var text = document.getElementById("displayText");
if(textHidden) {
    ele.style.display = "inline";
    text.innerHTML = "Show";
    textHidden = false

}
else {
    textHidden = true
    ele.style.display = "none";
    text.innerHTML = "Hide";

}
}​

HTML

<a id="displayText" href="#" onclick="toggle();">Show Further Details Specification</a>    
<div id="toggleText" style="display:none;"><h1>peek-a-boo</h1></div>​

Answer 3

只需使用text()方法：

$(this).text(
    function(i,t) {
        return t.indexOf('Hide') !== -1 ? 'Show activities' : 'Hide activities';
    });

JS Fiddle demo

此外，每次调用$(this) 时，请缓存您的$(this)对象以减少DOM遍历：

$('.button').click(function() {
    var that = $(this);
    that.siblings('.overview').slideToggle('slow');
    that.text(function(i, t) {
        return t.indexOf('Hide') !== -1 ? 'Show activities' : 'Hide activities';
    });
});​

JS Fiddle demo

Answer 4

var a=false;

$('.button').click(function() {
    $(this).siblings('.overview').slideToggle('slow');
    if(!a){
    $(this).html("Hide activities");
    a=true;
    }
else
{
$(this).html("Show activities");
    a=false;
}

});

Answer 5

试试这个

var text = $(this).text() == 'Show Activities' ? 'Hide Activities' : 'Show Activities';
$(this).html(text);

Answer 6

看看这个！...

  

$（'。button'）。点击（function（）{

$(this).siblings('.overview').slideToggle('slow');

if($(this).text() == 'Show Activities')
    $(this).text('Hide Activities');
else
    $(this).text('Show Activities'); 

     

}）;