恢复文本（）答案

【问题标题】：Reverting back text()恢复文本（）
【发布时间】：2017-02-14 19:15:05
【问题描述】：

目前我正在尝试以下方法：

通过按下“编辑”按钮，它会使用特定文本更改 .harms 类中的所有文本。
通过按下“还原”按钮，它应该将旧内容恢复到其原始状态。

现在我有两个害处，两个独特的文本都被翻译成别的东西。现在，当我恢复到原始文本时，它会在一种伤害中显示两种伤害。你可以在这里看到我的小提琴： https://jsfiddle.net/qhqyro12/1/

<div>
  <p class="harms">This is a first test</p>
  <p id="test" class="harms">This is a second test</p>
  <a id="edit">edit</a>
  <a id="revert">revert</a>
</div>

$(function() {
    var myOldContent = $(".harms").text();

    $('#edit').click(function() {
        $('.harms').text('I want this to revert back to original state.');
    });

    $('#revert').click(function() {
        $(".harms").text(myOldContent);
    });
});

如何确保将正确的字符串放回正确的 .harms 谢谢。

【问题讨论】：

那么当您点击.edit 时，哪个.harms 元素会受到影响？

标签： jquery revert

【解决方案1】：

您可以使用jQuery.data()来存储每个harms的原始内容。
点击edit后，原始数据存储在data中，点击revert后，恢复原值。

// Implementation:
var originalContentDataAttributeName = "originalContent";

function setRevertableText($el, text) {
  $el.data(originalContentDataAttributeName, $el.text());
  $el.text(text);  
}

function revertText($el) {
  // You may want to check for data attribute existence here
  $el.text($el.data(originalContentDataAttributeName));
  $el.removeData(originalContentDataAttributeName);
}

// Usage:
$("#edit").click(function() {
  $(".harms").each(function() {
    setRevertableText($(this), "I want this to revert back to original state.");
  });
});

$("#revert").click(function() {
  $(".harms").each(function() {
    revertText($(this));
  });
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div>
  <p class="harms">This is a first test</p>
  <p id="test" class="harms">This is a second test</p>
  <a id="edit">edit</a>
  <a id="revert">revert</a>
</div>

【讨论】：

感谢@Yeldar Kurmangaliyev，您的回答对我帮助很大，效果很好。

【解决方案2】：

您可以将旧值存储在data 中。然后当你点击revert时再次检索它。

$(function() {
    $('#edit').click(function() {
      $('.harms').each(function(){
        $this = $(this);
        // Store the current text in data old.
        $this.data('old', $this.text());
        // Set the new text.
        $this.text('I want this to revert back to original state.');
      });
        
    });

    $('#revert').click(function() {
      $('.harms').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);
      });
    });
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div>
  <p class="harms">This is a first test</p>
  <p id="test" class="harms">This is a second test</p>
  <a id="edit">edit</a>
  <a id="revert">revert</a>
</div>

【讨论】：

【解决方案3】：

$('#edit').click(function(){
  $('.hurms').each(function(i, elem){
    elem = $(elem);
    elem.attr('prev-content', elem.text());
    elem.text('you template text');
  });
});

$('#revert').click(function(){
  $('.hurms').each(function(i, elem){
    elem = $(elem);
    elem.text(elem.attr('prev-content'));
  });
});

这应该可以工作

【讨论】：

【解决方案4】：

您应该在编辑之前先保存旧文本：

$(function() {
  var myOldContent;

  $('#edit').click(function() {
    myOldContent = $('.harms').text();
    $('.harms').text('I want this to revert back to original state.');
  });

  $('#revert').click(function() {
    $(".harms").text(myOldContent);
  });
});

【讨论】：