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);   
    });
});

循环通过不同的按钮文本.onClick

2 个答案: