超时后如何将按钮恢复到原始状态

如何解决超时后如何将按钮恢复到原始状态

嗨，我正在尝试将jQuery函数写入；

1. 使用class .load-on-click将按钮的类别更改为btn警告，并将按钮文本更改为loading

2. 然后，在超时后，将按钮返回到更改为btn-warning之前的上一类，并将按钮文本恢复为更改之前的相同文本。

我目前在下面使用它，但是无法让它返回上一课，我只是将其暂时设置为btn-primary；如果有人知道我会怎么做，那就太好了，谢谢。

    jQuery("#ntc-web-main .load-on-click").click(function () {
        var buttonText = jQuery(this).text();

        jQuery(this)
            .text("Loading")
            .removeClass(
                "btn-default btn-primary btn-success btn-info btn-danger btn-link"
            )
            .addClass("btn-warning");

        //revert to original state,setTimeout(function () {
            jQuery(this)
                .text(buttonText)
                .removeClass("btn-warning")
                .addClass("btn-primary");
        },10000);
    });

解决方法

jQuery("#ntc-web-main .load-on-click").click(function () {
        var buttonText = jQuery(this).text();

        jQuery(this)
            .text("Loading")
            .removeClass(
                "btn-default btn-primary btn-success btn-info btn-danger btn-link"
            )
            .addClass("btn-warning");

        //revert to original state,setTimeout(() => {
            jQuery(this)
                .text(buttonText)
                .removeClass("btn-warning")
                .addClass("btn-primary");
        },10000);
    });

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>

<div id='ntc-web-main'>
<button class='load-on-click'>
click me
</button>
</div>

,

您的实际问题是setTimeout范围。在setTimeout回调内部，this引用了该回调，而不是按钮事件。

就我而言，我使用的是旧商品var that = this;，它引用了this。

jQuery(document).ready(
    function() {
        jQuery("#ntc-web-main .load-on-click").on(
            'click',function () {
                var that = this;
                var original = jQuery(that).text();
                
                jQuery(that)
                  .text("Loading")
                  .removeClass(
                    "btn-default btn-primary btn-success btn-info btn-danger btn-link"
                  )
                  .addClass("btn-warning");
                  
                setTimeout(
                    function () {
                      jQuery(that)
                          .text(original)
                          .removeClass("btn-warning")
                          .addClass("btn-primary");
                      },2000
                );
            }
        );
    }
);

button {
  background: #EFEFEF;
  border: none;
  padding: 15px;
  outline: none;
}

button.btn-warning {
  background: #EF7788;
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div id="ntc-web-main">
    <button class="load-on-click btn-default btn-primary btn-success btn-info btn-danger btn-link">
        Do something
    </button>
</div>