Question

我想使用jQuery动态更改html元素，每次点击，来回（从A到B再到A到B等......）

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

$('#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/

Answer 2

尝试使用toggle（）函数：http://api.jquery.com/toggle/这是一种在每次点击时交替操作的方法。

Answer 3

你可以这样做：

$(document).ready(function() {
  $("#cf_onclick").click(function() {
    var currentOpt =  $("#cf_onclick h2").html();
    currentOpt = (currentOpt == 'B' ? 'A' : 'B');
    $("#cf_onclick").html("<h2>"+currentOpt+"</h2>");
  });
});

希望这有帮助

使用jQuery来回更改html内容

3 个答案: