Question

我正在努力显示跨度中出现的更改的段落。最初，这是HTML的代码。

<div>
   <p><span id="spnOne">This text will change.</span></p>
</div>

我将原始文本更改为：

之前的文本++前面的文本-跨度的新文本== back @@ Text后面的文本通过使用append，prepend，before和after来实现。

我有这个按钮。

<div>
   <button id="btnResetChanges">Reset Paragraph Text</button>
</div>

当我单击此按钮时，我想更改所有发生的更改，以使其恢复到原始状态。

我试图做

$("#btnResetChanges").click(function () {
  ($("#spnOne").reset());

});

Answer 1

在这种情况下，您可以使用cookie和本地存储，但是我建议您使用data-* attributes存储原始段落，然后在您要重置时调用它，例如：

$('#spnOne').append('++++').prepend('----');

$('#btnResetChanges').click(function() {
  $('#spnOne').text($('#spnOne').data('original'));
})

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div>
  <p><span id="spnOne" data-original="This text will change.">This text will change.</span></p>
</div>
<div>
  <button id="btnResetChanges">Reset Paragraph Text</button>
</div>

Answer 2

//if you don't want to preload the data fields in the html
//you can set them with the javscript
var $changable = $('.changable').each(function(){
  $(this).data('originalHtml', this.innerHTML);
});

//when the button is clicked, change all the fields back to what is
//in their original data field
$('#btnResetChanges').on('click', function(){
  $changable.html(function(index, element){
    return $(this).data('originalHtml');
  });
});

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div>
  <p><span class="changable" contenteditable="true">This text will change.</span></p>
  <p><span class="changable" contenteditable="true">This text will change.</span></p>
  <p><span class="changable" contenteditable="true">This text will change.</span></p>
</div>


<div>
  <button id="btnResetChanges">Reset Paragraph Text</button>
</div>

重置paragrapgh的更改

2 个答案: