jquery - 使用 jQuery 来回更改 html 内容

Question

我想使用 jQuery 在每次单击时来回动态更改 html 元素(从 A 到 B 到 A 到 B 等...)

现在我使用一个空的 <div>充满了 jQuery:

$('#cf_onclick').append('<h2>A</h2>'); 

然后改变:

$(document).ready(function() {
$("#cf_onclick").click(function() {
$("#cf_onclick").html("<h2>B</h2>");
});
});

但我不知道如何将它移回 <h2>A</h2> .我猜 .empty() jQuery 函数可能有效...

Answer 1

一种方法是使用 .toggle() method , 也是第一次触发

$(document).ready( function(){
    $("#cf_onclick").toggle(
        function(){$(this).html("<h2>A</h2>");},
        function(){$(this).html("<h2>B</h2>");}
    ).click();
});

演示 http://jsfiddle.net/gaby/ufXxb/

---

或者，您可以创建两个 h2 标签，并在它们之间交替。

$(document).ready( function(){
    $('#cf_onclick').append('<h2>A</h2><h2 style="display:none">B</h2>');
    $("#cf_onclick").click(function(){
        $('h2', this).toggle();
    });
});

演示 http://jsfiddle.net/gaby/ufXxb/1/