如何使用jQuery同时向多个不同的按钮添加确认对话框

How to add a confirm dialogue to many different buttons at once with jQuery?

本文关键字：按钮 添加 确认 对话框 jQuery 何使用      更新时间：2023-09-26

假设我有这个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
  }
}

您可以为不同的按钮编写不同的点击处理程序，并调用公共检查函数。您想要调用的函数有一个参数，点击ok时可以调用该回调函数。

    $('.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
    }
  }

这也是一种方式。这样您就不必对代码进行太多修改。

我建议您在这里使用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];
  }
});

下面是我如何做到这一点的示例：

<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>
相关文章：