Question

我是jQuery的新手，希望有人可以帮助我。

我有一个由各种元素/类触发的JS函数，区别在于其中一些元素/事件是由点击触发的，而其他元素是由keyup等触发的。

到目前为止，我有以下作为一个按预期工作的示例，但我想知道是否有办法组合这些，因为这里唯一的区别是触发器（点击，键盘等）并避免重复代码。

如果有任何其他建议写这个不同，请告诉我。

我的jQuery（示例）：

$(document).on('keyup', '.calcMinus, .calcPlus', function(e){
    var row = $(e.target);
    $(row).closest('table').find('td.calcSum').each(function(index){
        calculateSums(row, index);
    });
});
$(document).on('click', '.trAdd, .trDelete, .trDown, .trUp', function(e){
    var row = $(e.target);
    $(row).closest('table').find('td.calcSum').each(function(index){
        calculateSums(row, index);
    });
});
// ...

我的JS功能：

function calculateSums(row, index){
   // do stuff
}

非常感谢，麦克

Answer 1

$(document).on('keyup', '.calcMinus, .calcPlus', combined);
$(document).on('click keyup', '.trAdd, .trDelete, .trDown, .trUp', combined);

function combined(e){
    var row = $(e.target);
    $(row).closest('table').find('td.calcSum').each(function(index){
        calculateSums(row, index);
    });
}

Answer 2

将事件处理程序中的代码提取到函数中，然后从两个现有处理程序中调用它：

function handleEvent(row) {
    $(row).closest('table').find('td.calcSum').each(function(index){
        calculateSums(row, index);
    })
}

$(document).on('keyup', '.calcMinus, .calcPlus', function(e){
    handleEvent($(e.target));
});
$(document).on('click', '.trAdd, .trDelete, .trDown, .trUp', function(e){
    handleEvent($(e.target));
});

如何组合不同的事件触发器

2 个答案: