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处理程序。

如果您正在处理某些事情而且您遇到类似这样的语法错误，请检查您的浏览器控制台，您应该会看到一个可以指出问题的错误。

＆＃13;

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

＆＃13;

.disabled {
  opacity: 0.3;
}

＆＃13;

<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>

＆＃13;

Answer 3

您可能遇到的问题是，在加载diviner之前绑定了禁用单击句柄。尝试将其移至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?output

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

3 个答案: