Реализация опции revert jQuery

Я пытаюсь реализовать опцию revert () внутри моего веб-сайта, но реализация не показывает никакого результата.
Это то, что у меня есть до сих пор:

$('.harm > text:nth-child(1) > tspan:nth-child(1)').each(function(){
    $this = $(this);
    // Store the current text in data old.
    $this.data('old', $this.text());
    });

$('#revert').click(function(){

  $('.harm > text:nth-child(1) > tspan:nth-child(1)').each(function(value, index){
    $this = $(this);
    // Fetch the old text from data.
    var old = $this.data('old');
    // Set the text on the element.
    $this.text(old);
    });
    });

и кнопка с id revert
Но он не возвращается к исходному тексту, после редактирования текста со следующим кодом:

function Akoord() {
var replacements = {
  'A': 'F#', 'A#': 'G', 'Bb': 'G', 'B': 'G#', 'C': 'A', 'C#': 'A#',
  'Db': 'Bb', 'D': 'B', 'D#': 'C', 'Eb': 'C', 'F': 'D', 'F#': 'D#',
  'Gb': 'Eb', 'G': 'E', 'G#': 'F', 'Ab': 'F'};


 $('.harm > text:nth-child(1) > tspan:nth-child(1)').text(function(i, text) {
return text.replace(/[A-G](b|#)?/g, function(m) { return replacements[m]; });
 });
}

Текст редактируется, но не может вернуться назад, нажав на кнопку, кто-то знает решение для этого?

1 ответ

  1. Я придумал решение, каждый выпадающий выбор открывает файл js.
    Я ввел следующий код внутри каждого файла js:

    function Bbkoord() {
    
    $('.harm > text:nth-child(1) > tspan:nth-child(1)').each(function(i, elem){
    elem = $(elem);
    elem.text(elem.attr('prev-content'));
    });
    
    $('.harm > text:nth-child(1) > tspan:nth-child(1)').each(function(i, elem){
    elem = $(elem);
    elem.attr('prev-content', elem.text());
    });
    
    $('.harm > text:nth-child(1) > tspan:nth-child(1)').each(function(i, elem){
    elem = $(elem);
    elem.text(elem.attr('prev-content'));
    });
    
    var replacements = {
      'A': 'G', 'A#': 'G#', 'Bb': 'Ab', 'B': 'A', 'C': 'Bb', 'C#': 'B',
      'Db': 'B', 'D': 'C', 'D#': 'C#', 'Eb': 'Db', 'F': 'Eb', 'F#': 'E',
      'Gb': 'E', 'G': 'F', 'G#': 'F#', 'Ab': 'Gb'};
    
    
    $('.harm > text:nth-child(1) > tspan:nth-child(1)').text(function(i, text) {
    return text.replace(/[A-G](b|#)?/g, function(m) { return replacements[m]; });
    });
    }
    

    Это гарантирует, что он вернется обратно в исходное состояние (если это не оригинал уже), затем запоминает это исходное состояние и возвращает его обратно в исходное состояние, если сначала не было возможно.

    Тогда он заменит весь текст, который нуждается в замене.

    Если я выберу другой, например Ckoord()
    Затем он делает excactly то же самое, но меняет разные буквы.
    Теперь мне не нужно перезагружать страницу каждый раз, чтобы вернуться к исходному тексту.

    Надеюсь, у кого-то есть хорошее применение для него.