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

我正在使用音频播放器，我想禁用“NEXT”按钮3秒钟，并在相同的时间内使其稍微透明。jQuery禁用按钮并将其样式改变几秒

禁用功能似乎工作，但是当我添加风格的变化，然后没有任何工作了。

这是我走到这一步：

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

我在做什么错？

来源

2017-02-26 mattvent

为什么你有两个'上click'听众？ –

*“没有任何工作了”*：你是什么意思？您发布的所有代码似乎都有效，因此您的问题中必须缺少某些内容。 – trincot

我有另一个jQuery命令（显示模式弹出），不再工作，但我不认为这是相关的。我的意思是，将“禁用”类添加到它使其他命令不起作用，包括禁用。 – mattvent

你为什么不那样做：

var clickLock = 0; 

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

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

来源

2017-02-26 16:08:46 laser

尽管这是一个好主意，这是如何解释OP的问题？ – trincot

@trincot OP表示这段代码正在工作。第二块代码不会做任何额外的事情，只会让事情变得复杂。为什么不在它工作的地方使用'addClass' /'removeClass' ... – laser

谢谢，它的工作原理。 – mattvent

你有什么工作，你只是在你的函数，它包装上#fwd的$.click()处理程序结束失踪});。

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

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>

来源

2017-02-26 16:18:06

这个答案实际上解释了什么是问题。 +1 – trincot

你的问题可能是你有约束力的禁止点击手柄占卜师加载之前。尝试将其移动到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

来源

2017-02-26 16:32:08

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

回答

相关问题