ボタンIDを取得しオブジェクトのプロパティとして使用して繰り返し機能を減らす

Question

これらの3つの機能を1つにまとめたいと思います。

私はボタンのIDを取得する必要があります（つまり、それはそれを何のために使うのでしょうか？）これを変数（以前に宣言されたもの）とオブジェクトのプロパティ宣言された）。

const  time = { 
       'name' : 'time', 
       'counter': 0, 
       'in' : 0, 
       'val' : 0 
      }, 
      idea = { 
       'name' : 'idea', 
       'counter': 0, 
       'in' : 0, 
       'val' : 0, 
       'time' : 1 
      }, 
      story = { 
       'name' : 'story', 
       'counter': 0, 
       'in' : 0, 
       'val' : 0, 
       'time' : 4, 
       'req' : idea, 
       'idea' : 10 
      }, 
      grana = { 
       'name' : 'grana', 
       'counter': 0, 
       'in' : 0, 
       'val' : 0, 
       'time' : 1, 
       'req' : story, 
       'story' : 1 
      } 

// cooldowns 
const  cooldown = { 
       idea: 300, 
       story: 2000, 
       grana: 2000 
      }; 

// adds to counter on click, checks buttons. 
const addCounter = button => { 
    button.counter += 1; 
} 


//Functions to be combined: 
$('#buttonDiv').on('click', '#idea', function(event) { 
    let element = this; 
    $('button').addClass('cooldown'); 
    $(element).prop('disabled', true); 
    setTimeout(function() { 
     $('button').removeClass('cooldown'); 
     addCounter(idea); 
     $(element).prop('disabled', false); 
     checkAll(); 
    }, cooldown.idea); 
}); 
$('#buttonDiv').on('click', '#story', function(event) { 
    let element = this; 
    $('button').addClass('cooldown'); 
    $(element).prop('disabled', true); 
    removeCounter(story); 
    setTimeout(function() { 
     $('button').removeClass('cooldown'); 
     addCounter(story); 
     $(element).prop('disabled', false); 
     checkAll(); 
    }, cooldown.story); 
}); 

$('#buttonDiv').on('click', '#grana', function(event) { 
     let element = this; 
    $('button').addClass('cooldown'); 
    $(element).prop('disabled', true); 
    removeCounter(grana); 
    setTimeout(function() { 
     $('button').removeClass('cooldown'); 
     addCounter(grana); 
     $(element).prop('disabled', false); 
     checkAll(); 
    }, cooldown.grana); 
}); 

どうすればいいですか？

Answer 1

クラスを3つのボタンに追加します。また、各ボタンに属性としてそのデータを追加するので、cooldownオブジェクトをダンプします。その後

<button id="idea" class="myClass" data-cooldown="300">MyButton</button> 

、この（あなたがボタンに追加されたクラスのすべてのメンバーが共有する唯一のクリックハンドラを使用）を実行します。例：

$('.myClass').on('click', function(event) { 
    let element = this; 
    $('button').addClass('cooldown'); 
    $(element).prop('disabled', true); 
    setTimeout(function() { 
     $('button').removeClass('cooldown'); 
     addCounter(idea); 
     $(element).prop('disabled', false); 
     checkAll(); 
    }, event.toElement.dataset.cooldown); 
}); 

datasetプロパティは、HTML5とかなり遅くを必要としますブラウザのバージョン。お使いのブラウザのバージョンがそれをサポートしていない場合は、代わりに（jQueryの1.4.1を - 私は思う - 以降）これを行うことができます。

}, $('#' + event.target.id).data('cooldown'); 

不可欠な技術がボタンにクラスを適用することですイベントハンドラに使用し、各ボタンに固有の値をHTMLの要素の属性として適用します。それを行うにはいくつかの方法があります。私はあなたに2つを与えました。

Answer 2

まあ、クリックイベントロジックを別の機能にして、イベントバインディングをそのままにしておくことができます。例として、

$('#buttonDiv').on('click', '#idea', function(event) { 
    eventLogic(this) 
}); 

$('#buttonDiv').on('click', '#story', function(event) { 
    eventLogic(this) 
}); 

$('#buttonDiv').on('click', '#grana', function(event) { 
    eventLogic(this) 
}); 


function eventLogic(el){ 
    let element = el; 
    let val; //This should be changed according to the clicked element 
    $('button').addClass('cooldown'); 
    $(element).prop('disabled', true); 

    if(event.currentTarget.id == '#idea'){ 
     val = cooldown.idea; 
    }else if(event.currentTarget.id == '#story'){ 
     val = cooldown.story; 
    }else if(event.currentTarget.id == '#grana'){ 
     val = cooldown.grana; 
    } 

    setTimeout(function() { 
     $('button').removeClass('cooldown'); 
     addCounter(idea); 
     $(element).prop('disabled', false); 
     checkAll(); 
    },val) 
}