如何在短时间内只使用JavaScript更改单击按钮文本？

Question

我正在做一个购物车的网站，我想我的加入购物车按钮说项目添加当点击它，但仅限于如2秒钟，然后它变回加入购物车。我该如何做到这一点？

Answer 1

试试这个：

$('button.add').click(function() { 
    var self = $(this); 
    if (!self.data('add')) { 
     self.data('add', true); 
     self.text('Item added'); 
     setTimeout(function() { 
      self.text('Add to Cart').data('add', false); 
     }, 2000); 
    } 
}); 

Answer 2

1. 在 '加入购物车' 事件处理程序更改按钮上的文字为 '产品加入'
2. 在同一事件处理程序使用方法：的setTimeout（makeTimeoutFunc（），2000 ）;
3. 在makeTimeoutFunc（）中将按钮文本更改为原始值。

Answer 3

点击后，按钮文本将被改变，按钮也将被禁用，以防止进一步的行动，然后在两秒后恢复。

(function() { 
 
    $(".btn-addcart").on("click", function() { 
 

 
    var $this = $(this), 
 
     oldText = $this.text(); 
 

 
    $this.text("Item added"); 
 
    $this.attr("disabled", "disabled"); 
 

 
    setTimeout(function() { 
 
     $this.text(oldText); 
 
     $this.removeAttr("disabled"); 
 
    }, 2000); 
 

 
    }); 
 
})();

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

 
<button class="btn-addcart">Add to cart</button>

Answer 4

在普通的JavaScript，你可以使用一个变量，如果单击该按钮检查，如果没有，设置按钮，期望字符串和两秒后改回来。

document.getElementById('button').addEventListener('click', function (clicked) { 
 
    return function() { 
 
     if (!clicked) { 
 
      var last = this.innerHTML; 
 
      this.innerHTML = 'Item added'; 
 
      clicked = true; 
 
      setTimeout(function() { 
 
       this.innerHTML = last; 
 
       clicked = false; 
 
      }.bind(this), 2000); 
 
     } 
 
    }; 
 
}(false), this);

<button id="button">Add to Cart</button>

Answer 5

试试这个：

<input type="button" id="btn"/> 

$("#btn").click(function(){ 
$(this).val("Item Added"); 
setTimeout(function(){ $("#btn").val("Add to Cart"); }, 2000);   
});