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

あなたが作品を持ってどのような、あなただけの#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>

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