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禁用按鈕並將其樣式改變幾秒

回答

相關問題