Изменение содержимого с помощью jQuery

Question

Я пытаюсь изменить контент, когда я нажимаю переключатель. Мне удалось заставить его изменить текст, когда я нажимаю переключатель, но когда я его снова нажму, он останется прежним. Я хочу, чтобы он возвращал его обратно в исходное значение, поэтому он работает как настоящий переключатель.

Javascript:

$(".switch a").on("click", function() { 
    $(".switch a").removeClass("active"), $(this).addClass("active"),$('.interval').text('yearly'); 
}); 

Codepen:

http://codepen.io/anon/pen/xbEmrM

Answer 1

Похоже, что вы хотите, чтобы текст "ежегодно", когда .switch a не имеет класс active и все, что было первоначально там, если ему делает. Если это так, вам нужно сохранить текст и затем восстановить его. (Также: Не используйте оператор запятая, где точка с запятой больше смысла.)

$(".switch a").on("click", function() { 
    // Grab the elements we care about 
    var $this = $(this), 
     $interval = $('.interval'); 

    // Currently have 'active'? 
    if ($this.hasClass('active')) { 
     // Yes, remove it, store the current $interval text, and set it to 'yearly' 
     $this.removeClass('active'); 
     $interval.data('original-text', $interval.text()).text('yearly'); 
    } else { 
     // No, put it back and restore the original $interval text 
     $this.addClass('active'); 
     $interval.text($interval.data('original-text')); 
    } 
});