javascript - 单击链接以更改 div 文本，但需要在单击另一个链接时返回原始内容 - js

Question

我需要在单击时更改 Div 的文本，但我还需要通过单击另一个链接来获取 div 的原始内容。

我该怎么做？

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

Answer 1

您必须为#changeText2创建另一个事件

一种方法是将#content 的原始内容存储到变量中。当您想恢复文本时，可以使用该变量。

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>

<小时/>

没有变量。使用.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>