还原文本（）

Question

目前我正在尝试以下操作：

通过按下按钮 'edit'，它将 class 中的所有文本更改为特定文本。harms。
按下按钮 'revert' 它应该 return 旧内容恢复到它的原始状态。

现在我有两个缺点，既是独特的文本，又被翻译成其他东西。现在，当我恢复到原始文本时，它显示了一种伤害中的两种伤害。你可以在这里看到我的 Fiddle： 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 中谢谢

Answer 1

您可以利用jQuery.data()存储每个harms的原创内容。
单击edit后，您的原始数据存储在数据中，当您单击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>

Answer 2

编辑前应先保存旧文本：

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

Answer 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'));
  });
});

这应该有效

Answer 4

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

$(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>

还原文本（）

Reverting back text()

jquery

revert