时间戳

首页 > 解决方案 > 从 jQuery 中作为属性的函数访问数据属性

javascript - 从 jQuery 中作为属性的函数访问数据属性

问题描述

我正在尝试将数据属性传递给生成 ass 属性的函数。

我有一个按钮：

<button class="login-btn" type="button" name="button">Log in</button>

还有一些按钮处理程序：

$(".login-btn").modalForm(
    {formURL: "/login/",
     redirect: '/admin/}
 );

模态表单处理程序：

$.fn.modalForm = function (options) {
    var defaults = {
        // ...
        formURL: null,
    };

    var settings = $.extend(defaults, options);
    if (options.redirect != null) {
        settings.formURL = settings.formURL + '?redirect=' + options.redirect
    };

    return this.each(function () {
        $(this).click(function (event) {
            newForm(
                // ...
                settings.formURL
                // ...);
        });
    });
};

这很好，但我想将重定向实现为数据属性，例如：

<button class="login-btn" type="button" data-redirect="admin" name="button">Log in</button>

我尝试修改按钮处理程序，例如：

$(".login-btn").modalForm(
    {formURL: "login",
     redirect: $(this).data("redirect")}
);

但它不起作用。从按钮的数据属性中获取参数并将其传递给我的 modalForm 函数的最佳方法是什么？

标签： javascriptjquery

解决方案

修改插件代码以使用回调函数或添加附加选项以基于属性工作（从插件代码内的属性中提取值）。

插件代码：

$.fn.modalForm = function(options) {
  return this.each(function() {
      var defaults = {
        // ...
        formURL: null,
      };

      var settings = $.extend(defaults, options);
      if (options.redirect != null) {
        if (typeof options.redirect === 'string')
          settings.formURL = settings.formURL + '?redirect=' + options.redirect
        else if (typeof options.redirect === 'function') {
          settings.formURL = settings.formURL + '?redirect=' + options.redirect.apply(this)
        }
      };

      $(this).click(function(event) {
          newForm(
            // ...
            settings.formURL
            // ...);
          });
      });
  });
}

代码 ：

$(".login-btn").modalForm({
     formURL: "login",
     redirect: function() { return $(this).data("redirect"); }
});

如果您无权访问插件代码，则遍历元素并单独初始化。

$(".login-btn").each(function(){
  $(this).modalForm({
     formURL: "login",
     redirect:  $(this).data("redirect"); 
  })
});

或者，如果您只有一个元素，则只需使用$(".login-btn")来获取元素、获取数据属性和设置值。

$(".login-btn").modalForm({
  formURL: "login",
  redirect: $(".login-btn").data("redirect")
});

推荐阅读