如何在 jQuery 中更改文本并在 5 秒后重置原始文本

Question

当用户单击该列表项时，我想将 ID 和标题为 Save 的列表项更改为 Saved。然后，5 秒后，我希望 Saved 恢复为 Save。我不关心它是如何变化的，无论是淡出还是其他。

我尝试使用setTimeout 失败。这是正确的做法吗？

Answer 1

你应该真正展示你迄今为止所做的尝试。也就是说，以下内容将满足您的需求：

$('#save').click(function() {
  var $this = $(this);
  var originalText = $this.text();
  $this.text('Saved');
  setTimeout(function() {
    $this.text(originalText)
  }, 5000); 

});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<ul>
  <li id="save">Save</li>
</ul>

Answer 2

像这样简单的事情我更喜欢在纯 JS 中做，因为我喜欢通过在不需要时不调用 jQuery 函数来增加一点额外的速度。如果你喜欢，这里是一个普通的 JS 示例。

document.getElementById('saved').addEventListener('click', function() {
    var self = this;
    self.textContent = 'Saved';

    setTimeout(function() {
        self.textContent = 'Save';
    }, 5000);
});

http://jsfiddle.net/0sdc5r9a/

Answer 3

我已经写了一些代码，我认为它会帮助你解决你的问题，或者我猜你已经这样做了，因为这个问题是 6 年前的，就像哦，我的那太长了? 但我想它可能会帮助你?

HTML 代码

所以在这里创建一个下拉选择列表

<p>Select Item</p>
  <select>
    <option>Laptop</option>
    <option>Mouse</option>
    <option>Keyboard</option>
    <option>Mobile</option>
    </select>
<p id="pra">Save</p>

JQuery 代码

在此处创建一个函数，并在此函数中写入文本，因为当您单击时，您将获得浏览器或文档中显示的文本。并添加setTimeout（显然将在camelCased 中设置时间，并设置你想在多少次后做什么。

$(document).ready(function(){
  $("#pra").on("click", function(){
   setTimeout(function(){$("#pra").html("Saved!"); });
   setTimeout(function(){$("#pra").html("Save"); }, 5000)
  });
});

希望它能帮助并解决您的问题:)

Answer 4

您可以在更改文本时将原始文本与元素一起保留，以便在还原时不需要将其作为静态字符串。 代码如下：

$('.list-item').on('click', function() {
    var itemEl = $(this);
        itemEl.data('originalText', $(this).html());
        itemEl.html('Saved');

        setTimeout(function() { 
            itemEl.html(itemEl.data('originalText')) }, 5000);
  }); 

检查小提琴here