如何在jQuery中更改元素文本，暂停和重置原始文本

Question

HTML：

<a href="#" class="change">Old Text</a>
<a href="#" class="change">Old Text</a>

我想用 jQuery 更改“文本”，延迟两秒钟，然后将其设置回原来的状态。我试过超时和延迟失败。该页面有多个具有相同文本“添加到购物车”的商品，然后切换到“已添加”，然后再返回。

jQuery：

$('.change').html('first').delay(2000).html('second')

这失败了。它忽略第一个，直接跳到第二个

_x = $(this);
$(_x).html('New Text');
_t = setTimeout(function(){
    $(_x).html('Old Text');
},2000);

如果用户在 2 秒重置之前单击并且未触发另一个，则此方法有效。如果有人单击 #1，然后在 #1 重置文本之前单击 #2，则它适用于 #2，但 #1 上的文本保留在新文本中。

我认为，由于它在函数内部，所以每个对象都会使用它自己的 _t 实例来实例化超时，但显然不是。

我不确定它是否重要，但元素有时是动态加载的，并且点击绑定是相应设置的

$(element).on('click','.change',function(_e) { ...

我该如何处理？提前谢谢你。

Answer 1

更新 [2017 年 3 月 4 日]

回复Wim Mertens评论：

不幸的是，当你双击时这不起作用......

您可以调整代码以处理 click 和 dblclick 事件并返回相同的预期行为。

基于此answer，您可以这样做：

var
  DELAY = 700,
  clicks = 0,
  timer = null,
  restoreText = function(target, oldText, newText) {
    target.html(newText); // set new text
    setTimeout(function() {
      target.html(oldText); // restore old text after n seconds
    }, 2000);
  }

$(".change").on("click", function(e) {
  clicks++; //count clicks
  var that = $(this); // $(".change")
  if (clicks === 1) {
    timer = setTimeout(function() {
      // set new text and restore old one after n seconds
      // parameters : target, oldText, newText 
      restoreText(that, that.html(), "new text")
      clicks = 0; //after action performed, reset counter
    }, DELAY);
    return false
  }
  // double click otherwise
  clearTimeout(timer); //prevent single-click action
  // set new text and restore old one after n seconds
  // parameters : target, oldText, newText 
  restoreText(that, that.html(), "new text")
  clicks = 0; //after action performed, reset counter
}).on("dblclick", function(e) {
  e.preventDefault(); //cancel system double-click event
});

查看更新JSFIDDLE

---

[原答案]

试试

// add a refresh button to image previews
$(".change").on("click", function () {
    var oldText = $(this).html();
    var that = $(this)
    $(this).html("new text");
    setTimeout(function () {
        that.html(oldText);
    }, 2000);
});

见JSFIDDLE

注意：如果要单击的元素是动态创建的，请尝试.on()在其委托形式中，例如：

$(".parentSelector").on("click", ".change", function () {
    // handler
});

Answer 2

如果我这样做，我会这样做：

HTML：

<div class="change">Add to cart</div>
<div class="change">Add to cart</div>

jQuery:

var wait;
$(document).ready(function(){ 

    $( ".change" ).click(function() {
        clearTimeout(wait);

        $(this).html("Added!");
        // Add item to cart

        wait = setTimeout(function(){ 
            $(".change").html("Add to cart");
        }, 2000);
    });
});

当然，我使用了 div 标签而不是超链接。 Demo here!

Answer 3

在您的第二个代码中，不要双重包装：

_x = $(this);
_x.html('New Text');
_t = setTimeout(function(){
    _x.html('Old Text');
},2000);

在你的第一个中，如果它在点击事件回调函数中被调用，则以 $(this).html(.....

Answer 4

试试

var newtext = "New Text";
$(document).on("click", ".change", function() {
$(this).map(function(i, el) {
  $(el).html(function(idx, html) {
     $(this).delay(2000, "html").queue("html", function() {
       $(this).html(html)
     });
     return html.replace(html, newtext)
  }).dequeue("html")
})
});
$("body").append("<a href=# class=change>Old Text</a>"
                + "\n<a href=# class=change>Old Text</a>");

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js">
</script>