Question

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

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

Answer 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（）然后它确实完全一样，但改变了不同的字母。现在我不需要每次都重新加载页面以返回原始文本。

希望有人能很好地利用它。

实现revert选项jQuery

1 个答案: