遍历不同的按钮文本.onClick

Question

我正在尝试单击时更改按钮文本。

现在我有

# Script Loading Button
$(document).ready ->
  $('.loop_button').click ->
    $(this).html('<i class="fa fa-spinner fa-spin"></i> Uploading...');

因此，当单击它时，它将变为fa-spinner图标和“ Uploading...文本。

如何在文本按钮中插入3个或更多字符串显示。 就像是：

["Uploading...", "Still Uploading", "This file is HUGE"]

Answer 1

假设您希望发生这种情况的时间间隔，则可以通过超时来做到这一点。 setTimeout函数将在指定的毫秒数后执行回调。 因此，例如：

timeouts = []
$('.loop_button').click ->
   button = $(this)
   button.html('<i class="fa fa-spinner fa-spin"></i> Uploading...')

   # switch label after 10 seconds...
   timeouts.push setTimeout ( ->
      button.html('<i class="fa fa-spinner fa-spin"></i> Still Uploading')
   ), 10000

   # switch label again after 30 seconds...
   timeouts.push setTimeout ( ->
      button.html('<i class="fa fa-spinner fa-spin"></i> This File is HUGE')
   ), 30000

然后，当您的上传完成时，您应该停止所有未决的超时：

clearTimeout timeout for timeout in timeouts
$(".loop_button").html("Start")

这是一个小提琴，正在运行中： http ： //jsfiddle.net/gwcoffey/6JRfp/1/

Answer 2

这是另一种选择。

$( ".loop_button" ).click(function() {
      $.each([ "I'm afraid. I'm afraid, Dave.","Dave, my mind is going.","There is no question about it. I can feel it." ], function( index, value ) {
        setTimeout(function(){
            $(".loop_button").html(value);
        }, index * 3000);   
    });
});