現在更改HTML內容來回jQuery的

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/

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

希望這有助於