Question

HTML：

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

我想改变＆＃34; Text＆＃34;使用jQuery，延迟两秒并将其设置回原始版本。我尝试过了超时并且没有成功延迟。该页面包含具有相同文本的多页项目＆＃34;添加到购物车＆＃34;，并切换到＆＃34;添加＆＃34;，然后再返回。

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);

在你的第一个，如果它在click事件内部调用回调函数，从$（this）开始.html（.....

Answer 4

尝试

＆＃13;

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>");

＆＃13;

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

＆＃13;

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

4 个答案: