实现恢复选项 jQuery答案

【问题标题】：Implementing revert option jQuery实现恢复选项 jQuery
【发布时间】：2017-02-14 23:19:43
【问题描述】：

我正在尝试在我的网站中实现一个 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]; });
 });
}

正在编辑文本，但无法通过按下按钮将其还原，有人知道解决方案吗？

【问题讨论】：

你能提供你的代码的工作版本吗？（包括 html/css）- 你可以使用 jsfiddle （或 so-sn-p）。
你可以看看网站非常感谢:) u8897p6152.web0101.zxcs.nl/verovio/score-viewer2test.html 我也有一个JSFiddle，正在工作，但我无法在网站内实现它。 jsfiddle.net/qhqyro12/5
我没有看到您在网站内的问题中发布的任何代码，也没有看到 jsfiddle...

标签： jquery function revert

【解决方案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() 然后它完全一样，但改变了不同的字母。现在我不需要每次都重新加载页面以返回原始文本。

希望有人对它有用。

【讨论】：