如何僅使用 javascript 在短時間內更改按鈕文本？

Question

我正在制作一個購物車網站，我希望我的Add to Cart按鈕在點擊它時顯示Item added ，但只有大約 2 秒鍾，然后它會變回Add to Cart 。 我該怎么做才能做到這一點？

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

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

在“添加到購物車”事件處理程序中，將按鈕文本更改為“已添加項目”
在同一事件處理程序中使用：setTimeout（makeTimeoutFunc（），2000）;
在makeTimeoutFunc（）中，將按鈕文本更改為原始值。

Answer 4

單擊后，按鈕文本將被更改，按鈕也將被禁用以防止進一步操作，然后在兩秒后恢復。

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

試試這個：

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

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

Answer 6

這是一個只有 javascript，沒有 jquery 的版本。

<body>
  <input id ="button" type="button" value="add to cart" onclick=" tick(button)">
</body>


<script type="text/javascript">

  function tick(button){
    document.getElementById("button").value = "Item added";
    setTimeout(() => (document.getElementById("button").value  = "add to cart"), 2000);
  }

</script>

如何僅使用 javascript 在短時間內更改按鈕文本？

問題描述

6 個解決方案

解決方案1
3 2016-09-21 08:00:15

解決方案2
3 2016-09-21 08:07:24

解決方案3
0 2016-09-21 08:02:32

解決方案4
0 2016-09-21 08:02:58

解決方案5
0 2016-09-21 08:14:10

解決方案6
0 2022-03-02 22:36:35

如何僅使用 javascript 在短時間內更改按鈕文本？

問題描述

6 個解決方案

解決方案1 3 2016-09-21 08:00:15

解決方案2 3 2016-09-21 08:07:24

解決方案3 0 2016-09-21 08:02:32

解決方案4 0 2016-09-21 08:02:58

解決方案5 0 2016-09-21 08:14:10

解決方案6 0 2022-03-02 22:36:35

解決方案1
3 2016-09-21 08:00:15

解決方案2
3 2016-09-21 08:07:24

解決方案3
0 2016-09-21 08:02:32

解決方案4
0 2016-09-21 08:02:58

解決方案5
0 2016-09-21 08:14:10

解決方案6
0 2022-03-02 22:36:35