javascript - 循环遍历不同的按钮文本.onClick

Question

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

现在我有

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

因此，单击后，它会更改为 fa-spinner 图标和 正在上传... 文本。

如何插入 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")

这是一个显示其实际效果的 fiddle :http://jsfiddle.net/gwcoffey/6JRfp/1/