如何使用jQuery自动更改按钮文本？

Question

我想更改按钮文本：单击按钮时，它必须显示“正在添加”，2-3秒后我需要它显示“已添加”。

这是一个示例代码：

jQuery(document).ready(function($) {

    $('.addcartbtn').toggle(function() {
        $(this).val('Adding');
    },

    // How to make the button text automatically change after 3 seconds?
    function() {
        $(this).val('Added');
    });

});

Answer 1

试试这个简单的代码：

$('.addcartbtn').on("click",function(){
   $(this).val("Adding....");
     setTimeout(function(){
        $('.addcartbtn').val("Added");}, 2000);
});

Answer 2

Example

我为你做了一个小提琴。有一个例子有两个你可能需要的案例，因为你没有正确解释你有哪种按钮。看看这个

JS

// This one works for <input> tags
$('input.addcartbtn').click(function(e){
    $(this).val('Adding..');
    setTimeout(function(){
       $(e.target).val('Clicked!');
    }, 3000);
});

// This one works for <button> tags
$('button.addcartbtn').click(function(e){
   $(this).text('Adding..');
   setTimeout(function(){
       $(e.target).text('Clicked!');
    }, 3000);
});

HTML

如果您有输入标签

<input type="submit" class="addcartbtn" value="Click Me" />

如果你有一个按钮标签

<button class="addcartbtn">Click me</button>

Answer 3

你可以这样做：

$(function () {
    var that = $('.addcartbtn');  // cache the element
    that.text('Adding..'); // change its text to "Adding.."
    setTimeout(function () { // create a function to be executed after...
        that.text('Added'); 
    }, 3000); // ... 3 seconds
});

JSFiddle