Question

我正在使用Metronic bootstrap管理它们，它附带sweetalert - 这是一个警报库

我尝试做的是尝试从表中删除记录时进行确认提醒，每行都有一个删除按钮

现在Metronic已经离开并对其进行了一些扩展，因此您现在可以使用html 5＆＃34;数据＆＃34;归因于声明性地声明标题，按钮类型等。

在我的MVC应用程序中，以下Razor代码迭代并添加按钮，请注意我在其中添加了data-id属性 - 这个想法是我可以在单击按钮时将其解压缩以获取id删除它

e.g。

<button data-id="@u.Id" type="button" class="btn btn-xs btn-circle red btn-delete mt-sweetalert" data-title="Are you sure?" data-type="warning" data-allow-outside-click="true" data-show-confirm-button="true" data-show-cancel-button="true" data-cancel-button-class="btn-danger" data-cancel-button-text="Cancel" data-confirm-button-text="Proceed" data-confirm-button-class="btn-info">
                                    <i class="fa fa-times"></i>
                                </button>

以下是Metronic JS扩展文件 - 我已经添加了几行代码，因此它在单击confirm选项时调用自定义函数。

我的想法是，我可以保留Metronic Theme的附加内容，并在我需要的页面上调用自定义函数

请注意，我还将$（this）上下文传递给我的自定义函数

var SweetAlert = function () {

return {
    //main function to initiate the module
    init: function () {
        $('.mt-sweetalert').each(function(){
            var sa_title = $(this).data('title');
            var sa_message = $(this).data('message');
            var sa_type = $(this).data('type'); 
            var sa_allowOutsideClick = $(this).data('allow-outside-click');
            var sa_showConfirmButton = $(this).data('show-confirm-button');
            var sa_showCancelButton = $(this).data('show-cancel-button');
            var sa_closeOnConfirm = $(this).data('close-on-confirm');
            var sa_closeOnCancel = $(this).data('close-on-cancel');
            var sa_confirmButtonText = $(this).data('confirm-button-text');
            var sa_cancelButtonText = $(this).data('cancel-button-text');
            var sa_popupTitleSuccess = $(this).data('popup-title-success');
            var sa_popupMessageSuccess = $(this).data('popup-message-success');
            var sa_popupTitleCancel = $(this).data('popup-title-cancel');
            var sa_popupMessageCancel = $(this).data('popup-message-cancel');
            var sa_confirmButtonClass = $(this).data('confirm-button-class');
            var sa_cancelButtonClass = $(this).data('cancel-button-class');

            $(this).click(function(){
                //console.log(sa_btnClass);
                swal({
                  title: sa_title,
                  text: sa_message,
                  type: sa_type,
                  allowOutsideClick: sa_allowOutsideClick,
                  showConfirmButton: sa_showConfirmButton,
                  showCancelButton: sa_showCancelButton,
                  confirmButtonClass: sa_confirmButtonClass,
                  cancelButtonClass: sa_cancelButtonClass,
                  closeOnConfirm: sa_closeOnConfirm,
                  closeOnCancel: sa_closeOnCancel,
                  confirmButtonText: sa_confirmButtonText,
                  cancelButtonText: sa_cancelButtonText,
                },
                function(isConfirm){
                   //action function on click
                    if (isConfirm){
                        swal(sa_popupTitleSuccess, sa_popupMessageSuccess, "success");


                        //custom function call added by me
                        //------------------------------------------
                        if(typeof onConfirmClick === "function")
                            onConfirmClick.call(this);
                        //------------------------------------------


                    } else {
                        swal(sa_popupTitleCancel, sa_popupMessageCancel, "error");
                    }
                });
            });
        });    

    }
}

}();

jQuery(document).ready(function() {
    SweetAlert.init();
});

我页面中的功能：

<script type="text/javascript">
    function onConfirmClick() {
        alert($(this).data('id'));
        //make Ajax call here
    }
</script>

现在的问题是，我得到了（$ this）但无法从按钮获取id或任何属性

如果我在控制台中打印$（this）

而且只是＆＃34;这个＆＃34;

这里的问题是：

如何在我的函数中获取data-id属性？如果我尝试$（this）.data（＆＃39; id＆＃39;） - 我未定义
这是正确的设计方法吗？我希望能够在确认时调用自定义函数，但不能破坏sweetalert上的Metronic扩展吗？

Answer 1

将id从按钮data-id传递到onConfirmClick()功能... 我会尝试通过变量进行传输。

因此，点击.mt-sweetalert，会触发SweetAlert。

没有什么能阻止你让另一个click处理程序将id存储在函数可访问的变量中。

var sweetAlertId;
$(".mt-sweetalert").on("click", function(){
  sweetAlertId = $(this).data("id");
});

然后在函数中：

function onConfirmClick() {
    alert(sweetAlertId);
    //make Ajax request using sweetAlertId here!
}

简而言之，id不会被迫通过SweetAlert转发！
;）

将JQuery上下文$（this）传递给另一个函数并检索上下文数据

1 个答案: