更改后如何取回原始 HTML

Question

我試圖讓原始標題文本在被 jQuery 更改后顯示，而不必同時在標記和腳本中寫入。

我的 html 開頭為：

<div class="headings">
<h1>Original Heading</h1>
</div>

然后在用戶做出選擇后，標題會被 jQuery 改變：

  $('#userSelection').on('click', function() {
    $('.headings h1').html('<h1>New Heading</h1>');
  });

目前我已經設置了它，所以如果用戶單擊重置按鈕，標題將使用 jQuery 更改回原來的：

  $('#resetBtn').on('click', function() {
    $('.headings h1').html('<h1>Original Heading</h1>');
  });

有沒有辦法回到原始標題而不必在 jQuery 中寫出來，因為它已經在原始 HTML 中了？

Answer 1

取回它的唯一方法是刷新頁面，或者再次使用 jQuery 將其寫回。

Answer 2

您當前的方法將另一個<h1>插入到現有的<h1> ，這可能不是您想要的。 第一個片段證明了這一點。 嵌套的<h1>似乎是導致單擊時字體大小增加的原因。 有趣的...

 $('#userSelection').on('click', function() { $('.headings h1').html('<h1>New Heading</h1>'); }); $('#resetBtn').on('click', function() { $('.headings h1').html('<h1>Original Heading</h1>'); });

 <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script> <div class="headings"> <h1>Original Heading</h1> </div> <div> <input type="button" id="userSelection" value="userSelection"> <input type="button" id="resetBtn" value="resetBtn"> </div>

第二個片段顯示使用.empty().append()不會導致嵌套<h1>的。

 $('#userSelection').on('click', function() { $('.headings').empty().append('<h1>New Heading</h1>'); }); $('#resetBtn').on('click', function() { $('.headings').empty().append('<h1>Original Heading</h1>'); });

 <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script> <div class="headings"> <h1>Original Heading</h1> </div> <div> <input type="button" id="userSelection" value="userSelection"> <input type="button" id="resetBtn" value="resetBtn"> </div>

Answer 3

 $(document).ready(function() { var tempBucket = '';//temporary bucket to save our original //if use localstorage can be like this one // var tempBucket = localStorage.getItem('original') ?? ''; $('#selectBtn').click(function(){ tempBucket = $('.headings h1').html(); //if using localstorage //localStorage.setItem('original', $('.headings h1').html()); $('.headings h1').html('New Headings'); }); $('#resetBtn').click(function(){ $('.headings h1').html(tempBucket); }) });

 <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script> <div class="headings"> <h1>Original Heading</h1> </div> <button id="selectBtn">select</button> <button id="resetBtn">reset</button>

希望能回答你的問題