Reverting back text()

Question

Currently I am trying the following:

By pressing button 'edit' it is changing all text within class .harms with a certain text.
By pressing button 'revert' it should return the oldcontent to it's original state.

Now I have two harms with both a unique text which is both being translated into something else. Now when I revert back to original text it is displaying both harms in one harm. You can see my Fiddle here: 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);
    });
});

How can I make sure the correct string is placed back in the correct .harms Thanks.

So when you click `.edit` which `.harms` element should be affected? — Rory McCrossan, Oct 06 '16 at 06:47

Yeldar Kurmangaliyev · Accepted Answer · 2016-10-06T07:01:39.567

You can utilize jQuery.data() to store original content of every harms.
After you click edit your original data is stored in data, and when you click revert, its value is restored.

// 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>

Thanks @Yeldar Kurmangaliyev, your answer helped me out a lot and works great. — Henk Rensenbrink, Oct 06 '16 at 07:01

score 1 · Answer 2 · answered Oct 06 '16 at 06:50

You should save your old text first before editing:

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

score 0 · Answer 3 · answered Oct 06 '16 at 06:52

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

this should work

score 0 · Answer 4 · answered Oct 06 '16 at 06:53

You can store the old value in data. And then retrieve it again when you click 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>

Reverting back text()

4 Answers4