Implementing revert option jQuery

Question

I am trying to implement a revert() option inside my website but the implementation does not show any result. This is what I have so far:

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

and a button with the id revert But it does not revert back to original text, after editing the text with the following code:

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

The text is being edited but can't revert it back by pushing the button, someone know a solution for this?

Can you provide a working version of your code? (including html/css) - you can use [jsfiddle](http://jsfiddle.net) for that (or so-snippet). — Dekel, Oct 06 '16 at 09:40
You can take a look at the website thank you very much :) http://u8897p6152.web0101.zxcs.nl/verovio/score-viewer2test.html I also have a JSFiddle, working, but I am unable to implement it inside the website. https://jsfiddle.net/qhqyro12/5/ — Henk Rensenbrink, Oct 06 '16 at 09:57
I don't see any of the code you posted in your question inside your website nor the jsfiddle... — Dekel, Oct 06 '16 at 10:02

score 0 · Answer 1 · answered Oct 06 '16 at 10:07

I figured out a solution, every dropdown selection opens a js file. I entered the following code inside each js file:

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

This makes sure it will revert back to original state (if it isn't original already), then remembers this original state and reverts it back to original if first wasn't possible.

Then it will replace all text which need replacement.

If I select another one, for example Ckoord() Then it does excactly the same, but changes different letters. Now I don't need to reload page everytime to go back to original text.

Hope someone has a good use for it.

Implementing revert option jQuery

1 Answers1