Question

我想将这三个功能合二为一。

为了实现这一点，我需要获取按钮ID（从而将它从on函数中移除 - 它的术语是什么？）并在函数内部将其用作变量（先前声明的）和对象属性（也是之前声明的））。

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

在三个按钮中添加一个课程。另外，转储您的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中元素的属性。有几种不同的方法可以做到这一点;我给了你两个。

获取按钮ID并将其用作对象属性以减少重复的功能

1 个答案: