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因为它更具可扩展性，如果您将来需要添加不同的按钮操作。

干掉事件处理程序

1 个答案: