Изменение содержания 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() метода и его запуск в первый раз

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

Надеюсь, это поможет