将 jquery onclick 更改为 javascript 中的函数库

Question

这是一个通知系统，当我点击按钮时，它会出现一个通知。 我的按钮代码是

<h5 class="mb-4">Bootstrap Notify</h5>
<a href="#" class="btn btn-outline-primary rounded notify-btn mb-1" data-from="top" data-align="left">Top Left</a>

在这个 jquery 脚本上的 onclick 工作正常。

$("body").on("click", ".notify-btn", (function (e) {
        var t, a, n;
        e.preventDefault(), t = $(this).data("from"), a = $(this).data("align"), n = "primary", $.notify({
            title: "Bootstrap Notify",
            message: "Here is a notification!",
            target: "_blank"
        }, {
            element: "body",
            position: null,
            type: n,
            allow_dismiss: !0,
            newest_on_top: !1,
            showProgressbar: !1,
            placement: {
                from: t,
                align: a
            },
            offset: 20,
            spacing: 10,
            z_index: 1031,
            delay: 4e3,
            timer: 2e3,
            url_target: "_blank",
            mouse_over: null,
            animate: {
                enter: "animated fadeInDown",
                exit: "animated fadeOutUp"
            },
            onShow: null,
            onShown: null,
            onClose: null,
            onClosed: null,
            icon_type: "class",
            template: '<div data-notify="container" class="col-11 col-sm-3 alert  alert-{0} " role="alert"><button type="button" aria-hidden="true" class="close" data-notify="dismiss">×</button><span data-notify="icon"></span> <span data-notify="title">{1}</span> <span data-notify="message">{2}</span><div class="progress" data-notify="progressbar"><div class="progress-bar progress-bar-{0}" role="progressbar" aria-valuenow="0" aria-valuemin="0" aria-valuemax="100" style="width: 0%;"></div></div><a href="{3}" target="{4}" data-notify="url"></a></div>'
        })
    }))

这工作正常。但我需要作为函数调用系统。

showNotification(msg);

脚本应该是这样的

function showNotification(msg){

  //code follows....
}

Answer 1

要执行您需要的操作，请通过调用$.notify() 来定义函数，并将type、from 和align 参数作为参数传递：

function showNotification(type, from, align) {
  $.notify({
    title: "Bootstrap Notify",
    message: "Here is a notification!",
    target: "_blank"
  }, {
    // some properties removed for brevity...
    type: type,
    placement: {
      from: from,
      align: align
    }
  })
}

$("body").on("click", ".notify-btn", e => {
  e.preventDefault();
  let $button = $(e.target);
  showNotification("primary", $button.data("from"), $button.data("align"));
});