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

Question

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

4

HTML：

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

我希望用jQuery改变“Text”，延迟两秒后将其设置回原始状态。我尝试过timeout和delay，但没有成功。页面上有多个具有相同文本“Add to cart”的项目，会切换到“已添加”，然后再切换回来。

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) { ...

我该如何处理这个问题？谢谢您的帮助。

- Mark

1

尝试使用 jquery - $.each，它可以循环遍历所有元素。如果您能创建一个 jsfiddle，那么调试会更加方便。 - Pazza22

4个回答

1

如果我在做这件事情，我会这样做：

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

当然，我使用了

标签而不是超链接。这里有演示！

- CodeUK

0

在你的第二段代码中，不要双重包装：

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

在您的第一个函数中，如果它被调用于click事件回调函数内，请以$(this).html(.....开头

- Andi

0

尝试

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>

- guest271314

网页内容由stack overflow 提供, 点击上面的

可以查看英文原文，
原文链接

- JFK · Accepted Answer

更新 [2017年3月4日]

针对Wim Mertens的评论：

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

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

基于这个答案，您可以执行以下操作：

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

See updated JSFIDDLE

[Original answer]

Try

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