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

Question

HTML:

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

我想把"Text"改成jQuery，延迟两秒再设置回原来的。我试过超时和延迟不成功。该页面有多个具有相同文本 "Add to cart" 的项目，切换到 "Added"，然后再返回。

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

在你的第二个代码中，不要双重换行：

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

首先，如果它在点击事件回调函数中调用，请从 $(this) 开始。html(.....

Answer 2

尝试

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>

Answer 3

更新 [2017 年 3 月 4 日]

回应评论：

Unfortunately this doesn't work when you double click ...

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

基于这个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

注意：如果 click 的元素是动态创建的，则尝试 .on() 在其委派形式如：

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

Answer 4

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

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!

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

How to change element text in jQuery, pause, and reset original text

jquery

timeout

delay