link clicked to change div text but needs original content back on clicking another link - js

I needed to change the text of a Div on a click, but I also need to get back the original content of the div by clicking another link.

How can I do it?

$(document).ready(function() {
  $('#changeText').click(function() {
    $('#content').text("This is text changed using jquery");
  });
});
#content {
  padding: 10px;
  background: #eee;
  width: 300px;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<a href="#" id="changeText">Click here to change text of div</a>
<a href="#" id="changeText2">Original Div content</a>
<div id="content">
  Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.
</div>

1 answer

  • answered 2018-02-13 02:59 Eddie

    You have to create another event for #changeText2

    One way is to store the orginal content of #content to a variable. When you want to revert the text, you can use the variable.

    var orginalText = ""; /* Variable to store the original content */
    
    $(document).ready(function(){
        $('#changeText').click(function(){
             orginalText = $('#content').html(); /* store the original content to the variable */
             $('#content').html("This is text changed using jquery");
        });
    
        $('#changeText2').click(function(){
             if ( orginalText != "" ) $('#content').html(orginalText); /* use the variable to revert the contentn */
        });
    });
    <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
    <a href="#" id="changeText">Click here to change text of div</a>
    <a href="#" id="changeText2">Original Div content</a>
    <div id="content">
    Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.
    </div>


    Without Variable. Using .data()

    $(document).ready(function() {
      $('#changeText').click(function() {
        $('#content').data("orginal-content", $('#content').html());
        $('#content').html("This is text changed using jquery");
      });
    
      $('#changeText2').click(function() {
        $('#content').html($('#content').data("orginal-content"));
      });
    });
    <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
    <a href="#" id="changeText">Click here to change text of div</a>
    <a href="#" id="changeText2">Original Div content</a>
    <div id="content">
      Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.
    </div>