如何使用jQuery一次向許多不同的按鈕添加確認對話框？

Question

假設我有這個HTML ...

<button class="btn-remove-this">Remove this</button>
<button class="btn-remove-that">Remove that</button>
<button class="btn-remove-some-other-thing">Remove some other thing</button>
<!-- and many more 'Remove ...' buttons -->

...以及此JavaScript。

$(function() {
  $('.btn-remove-this').click(function() {
    functionWhichRemovesThis();
  }
  $('.btn-remove-that').click(function() {
    functionWhichRemovesThat();
  }
  $('.btn-remove-some-other-thing').click(function() {
    functionWhichRemovesSomeOtherThing();
  }
  // and many more click handlers
});

現在，我想在刪除所有這些內容之前通過確認對話框提示用戶。 有沒有一種方法，而無需在每個單擊處理程序中添加和調用confirm ？

我的想法是，向所有不同的按鈕添加一個類（比如btn-remove ），然后添加一個看起來像這樣的單擊處理程序：

$('.btn-remove').click(function() {
  if (confirm('Are you sure you want to remove this?')) {
    // execute the body of the "more specific" click handler
  } else {
    // prevent the body of the "more specific" click handler from executing
  }
}

Answer 1

我建議您在這種情況下使用data-* ：

<button class="btn-remove" data-func="functionWhichRemovesThis">Remove this</button>
<button class="btn-remove" data-func="functionWhichRemovesThat">Remove that</button>
<button class="btn-remove" data-func="functionWhichRemovesSomeOtherThing">Remove some other thing</button>  

現在，在您的js代碼中，您可以執行以下操作：

var removeUtil = {
    functionWhichRemovesThis           : function(){},
    functionWhichRemovesThat           : function(){},
    functionWhichRemovesSomeOtherThing : function(){}
};

$('.btn-remove').click(function() {
  if (confirm('Are you sure you want to remove this?')) {
     var removeIt = $(this).data('func');
     removeUtil[removeIt];
  }
});

Answer 2

您可以為不同的按鈕編寫不同的單擊處理程序，然后調用通用檢查函數將要調用的函數具有一個參數，然后單擊確定就可以調用該回調函數。

    $('.btn-remove-this').click(function() {
      check(functionWhichRemovesThis);  
    });

    $('.btn-remove-that').click(function() {
      check(functionWhichRemovesThat);
    });

    $('.btn-remove-some-other-thing').click(function() {
      check(functionWhichRemovesSomeOtherThing);
    });


 function check(callback){
    if (confirm('Are you sure you want to remove this?')) {
        callback();
    } else {
    // prevent the body of the "more specific" click handler from executing
    }
  }

這也是一種方法。 這樣您不必修改太多代碼。

Answer 3

這是我將如何做的一個例子：

<button class="btn-remove btn-remove-some-other-thing">Remove something</button>
<button data-callback="App.remove.that" data-confirmText="Remove that?" class="btn-remove btn-remove-some-other-thing">Remove that</button>
<button data-callback="App.remove.this" data-confirmText="Remove this?" class="btn-remove btn-remove-some-other-thing">Remove this</button>

<script type="text/javascript">
    var App = {};
    App.remove = {};
    // create an object to define different callbacks, outside of document(ready) so you an access it anywhere else you want.
    App.remove['this'] = {
        'yes': function () {
            console.log('this.yes')
        },
        'no': function () {
            console.log('this.no')
        }
    };
    App.remove['that'] = {
        'yes': function () {
            console.log('that.yes')
        },
        'no': function () {
            console.log('that.no')
        }
    };
    $(document).ready(function () {
        $('.btn-remove').click(function () {
            var callback = {};
            if (typeof $(this).attr('data-callback') !== 'undefined') {
                // get the callback object of current button.
                callback = $(this).attr('data-callback').split('.').reduce(function (obj, i) {
                    return App.remove[i];
                }, App.remove);
            }

            var confirmText = 'Are you sure you want to remove this?';
            if (typeof $(this).attr('data-confirmText') !== 'undefined') {
                // set alternate text if needed
                confirmText = $(this).attr('data-confirmText');
            }
            if (confirm(confirmText)) {
                if (callback.hasOwnProperty('yes')) {
                    // do callback if property exists in callback object
                    callback.yes();
                }
            } else {
                if (callback.hasOwnProperty('no')) {
                    // do callback if property exists in callback object
                    callback.no();
                }
            }
        });
    });
</script>