jquery - 切换 html 值

Question

可能重复：
切换按钮和切换可见性

我在一个页面上有一段文字，它充当一个按钮，

<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

我相信您正在考虑的选择器是跨度的“innerHTML”，一旦您完成显示文本，您可以在 javascript 中更改它，以便“显示活动”更改为“隐藏活动”，然后只写一个与“显示活动”代码完全相反的小功能。:)

<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 小提琴演示。

此外，缓存您的$(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 小提琴演示。

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').click(function() {

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

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

});