如何只使用javascript修改单击时的按钮文本?

I'm making a shopping cart website and I want my Add to Cart button to say Item added upon clicking it, but only for like 2 seconds then it changes back to Add to Cart . How do I do achieve this?

我正在创建一个购物车网站，我想要我的Add to cart按钮在点击它时显示添加的项目，但是仅仅2秒，它就会重新添加到购物车。我如何做到这一点?

5 个解决方案

#1

Try this:

试试这个:

$('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);
    }
});

#2

In plain Javascript, you could use a variable for checking if the button is clicked and if not, set the button to the wanted string and change it back after two seconds.

在普通的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>

#3

1. In 'Add To Cart' event handler change the button text to 'Item Added'
2. 在“添加到购物车”事件处理程序中，将按钮文本更改为“添加项”
3. In the same event handler use: setTimeout(makeTimeoutFunc(), 2000);
4. 在同一事件处理程序中使用:setTimeout(makeTimeoutFunc()， 2000);
5. In makeTimeoutFunc() change the button text to original value.
6. 在makeTimeoutFunc()中，将按钮文本更改为原始值。

#4

After click, button text will be changed and the button will also be disabled to prevent further actions, then reverted back after two seconds.

点击后，按钮文本将被更改，按钮也将被禁用以防止进一步的操作，然后在两秒钟后返回。

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

#5

Try This:

试试这个:

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

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