撥動HTML值

可能重複：
Toggle button and Toggle visibility 撥動HTML值

我有一塊充當按鈕頁面上的文本中，

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

當你點擊它它隱藏或顯示一些HTML。我想改變它的HTML，所以我想這

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

它改變了HTML的文本，但我希望它改回來，當我再次點擊它。有沒有像切換功能，但將HTML放回原點？

來源

2012-09-27 Wheelz

試試這個

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

來源

2012-09-27 09:57:31

我相信你正在考慮的選擇器是跨度的「innerHTML」，一旦你完成顯示文本，你可以在javascript中進行更改，以便「顯示活動」更改爲「隱藏活動」，然後只需寫出一個與「顯示活動」代碼完全相反的小函數即可。 :)

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

然後在你的JavaScript：

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

來源

2012-09-27 09:55:10 L0j1k

我認爲這可以幫助你

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>

來源

2012-09-27 09:55:12 Maddy

只需使用text()方法：

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

JS Fiddle demo。

此外，緩存你$(this)對象每次減少DOM遍歷你打電話$(this)：

$('.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。

來源

2012-09-27 09:56:25

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; 
} 

});

來源

2012-09-27 09:56:50 Sutha

檢查了這一點！...

$（ '按鈕'）。點擊（函數（）{

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

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

}）;

來源

2012-09-27 10:24:43 soonji

回答

相關問題