3

閉じる、削除、保存の 3 つのボタンがあるモーダルがあります。各ボタンにはクリック ハンドラーが必要であり、各クリック ハンドラーは最後のアクションとしてモーダルを非表示にします。これは素朴なアプローチです：

// 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');
});

このコードは、DRY できるように感じます。これらのイベント ハンドラーを DRY するには、どのような手法/構文を使用できますか?

4

1 に答える 1

3

コード自体は私には問題ないようです。ワンクリックハンドラーで実行したい場合は、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');
});

close（以外に）ボタンが2つしかない場合は、をステートメントswitchに短縮できます。将来、別のボタンアクションを追加する必要がある場合に備えて、より拡張性の高いifaを使用しました。switch

于 2013-01-08T12:46:54.470 に答える