干掉事件处理程序

Question

我有一个带有三个按钮的模式：关闭、删除和保存。每个按钮都需要一个单击处理程序，并且每个单击处理程序都将模式隐藏为其最后一个操作。这是天真的方法：

// Close
$('#edit-user-close').on('click', function () {
  $modal.modal('hide');
});

// Remove
$('#edit-user-remove').on('click', function () {
  removeUser();

  $modal.modal('hide');
});

// Save
$('#edit-user-save').on('click', function () {
  saveChanges();

  $modal.modal('hide');
});

这段代码感觉很像是可以干掉的。我可以使用什么技术/语法来干掉这些事件处理程序？

Answer 1

代码本身对我来说似乎很好。如果您想在单击处理程序下执行此操作，您可以使用具有data 属性的类来确定操作，试试这个：

<a href="#" class="modal-action" data-action="close">Close/a>
<a href="#" class="modal-action" data-action="remove">Remove user</a>
<a href="#" class="modal-action" data-action="save">Save</a>

$('.modal-action').click(function() {
    switch ($(this).data('action')) {
       case 'remove':
           removeUser();
           break;
       case 'save':
           saveChanges();
           break;
    }

    $modal.modal('hide');
});

如果您只需要 2 个按钮（除了 close），那么 switch 可以缩短为 if 语句。我使用了switch，因为它更具可扩展性，如果您将来需要添加不同的按钮操作。