jQuery禁用按钮并更改其样式几秒钟

Question

我正在音频播放器上工作，我想禁用“ NEXT”按钮3秒钟，并在相同的时间内使其稍微透明。

禁用功能似乎起作用，但是当我向其中添加样式更改时，则不再起作用。

这是到目前为止我得到的：

的HTML

<i class="fa fa-step-forward fa-fw" id="fwd"></i>

jQuery的

var clickLock = 0;

$('#fwd').on('click', function(){
    if (clickLock == 0) {
        clickLock = 1;

        setTimeout(function(){  
           clickLock = 0;
        }, 3000);
    }

});

$(function(){
 $('#fwd').click(function(){
    $(this).addClass('disabled');
    setTimeout(function(){
      $('#fwd').removeClass('disabled');}, 3000);
});

的CSS

.disabled {
  opacity: 0.3;
}

我究竟做错了什么 ？

Answer 1

你为什么不那样做：

var clickLock = 0;

$('#fwd').on('click', function(){
    if (clickLock == 0) {
        clickLock = 1;
        $('#fwd').addClass('disabled');

        setTimeout(function(){  
           clickLock = 0;
           $('#fwd').removeClass('disabled');
        }, 3000);
    }
});

Answer 2

您所拥有的有效，只是想念}); 在将$.click() #fwd $.click()处理函数包装在#fwd函数#fwd 。

如果您正在处理某些内容，并且遇到类似这样的语法错误，请检查浏览器控制台，然后会看到一个错误，指出您的问题所在。

 var clickLock = 0; $('#fwd').on('click', function() { if (clickLock == 0) { clickLock = 1; setTimeout(function() { clickLock = 0; }, 3000); } }); $(function() { $('#fwd').click(function() { $(this).addClass('disabled'); setTimeout(function() { $('#fwd').removeClass('disabled'); }, 3000); }); }); 

 .disabled { opacity: 0.3; } 

 <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.1.1/jquery.min.js"></script> <i class="fa fa-step-forward fa-fw" id="fwd">click</i> 

Answer 3

您的问题可能是您在载入占卜器之前绑定了禁用点击手柄。 尝试将其移至jQuery ready 。

您可以使用语义按钮元素并相应地设置样式，从而大大简化代码。

function disableButton(event) {
  var $button = $(event.target);
  $button.addClass('disabled').prop('disabled', 'disabled');

  setTimeout(function(){  
    $button.removeClass('disabled').prop('disabled', false);
  }, 3000);
}

$(document).ready(function() {
  $('#forward-button').on('click', disableButton);
});

http://jsbin.com/pubemawomu/edit？输出