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

Question

我想更改按钮文字：点击按钮时，它必须显示＆＃34;添加＆＃34; 2-3秒后，我需要它来显示＆＃34;添加＆＃34;。

以下是示例代码：

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

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 2

你可以这样做：

$(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

Answer 3

试试这个简单的代码：

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