Question

我正在尝试创建一个jQuery插件。在配置插件时，我希望定义一个将通过Ajax发布的对象。对象value2中的一个属性基于插件应用于的元素（a.myClass），我想我会尝试以下内容：

post:{value1:1,value2:function(t){return $(t).data('id');},value3:3}

但是，在插件中，对象等于{ value1=1, value3=3, value2=function()}，如果发布，value2将作为undefined发送。我发现我可以使用settings.post.value2(this)访问该值，但是，我不知道这对我有何帮助。我想我可以遍历对象并评估每个属性，但这看起来并不合适。

这样做的正确方法是什么？谢谢

http://jsbin.com/sedoqeluni/1/

<html>
    <head>
        <meta http-equiv="Content-Type" content="text/html; charset=utf-8">
        <title>editSelect</title>  
        <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.2/jquery.js" type="text/javascript"></script>
        <script type="text/javascript"> 
            (function($){
                var methods = {
                    init : function (settings) {
                        return this.each(function () {
                            $(this).click(function(e) {
                                console.log(settings.post);
                                console.log(settings.post.value2(this));
                                $.post('testing.php',settings.post);
                            });
                        });
                    }
                };
                $.fn.testit = function(method) {
                    if (methods[method]) {
                        return methods[method].apply(this, Array.prototype.slice.call(arguments, 1));
                    } else if (typeof method === 'object' || ! method) {
                        return methods.init.apply(this, arguments);
                    } else {
                        $.error('Method ' +  method + ' does not exist on jQuery.testit');
                    }    
                };
                }(jQuery)
            );
            $(function(){
                $('.myClass').testit({
                    foo:'bar',
                    post:{value1:1,value2:function(t){return $(t).data('id');},value3:3}
                });
            });
        </script>
    </head>

    <body>
        <a class="myClass" href="javascript:void(0)" data-id="2">hello</a>
        <a class="myClass" href="javascript:void(0)" data-id="222">hello</a>
    </body>
</html>

Answer 1

应调用内联函数以返回值：

post:{value1:1, value2: (function(t){return $(t).data('id');})(t), value3:3}

或者使用非内联函数来提高可读性：

var getValue2 = function(t) {
    return $(t).data('id');
};
....
post:{value1:1, value2: getValue2(t), value3:3}

更新

猜猜t应该是同一个元素.myClass。所以代码将是

 $(function(){
   $('.myClass').each(function() {
     $(this).testit({
       foo:'bar',
       post:{
         value1:1,
         value2: (function(t){return $(t).data('id');})(this),
         value3:3
       }
     });
   });
 });

更新＃2

但UPDATE中的代码可以简化为直接读取data-id而不使用任何内联函数：

 $(function(){
   $('.myClass').each(function() {
     var $this = $(this);
     var id = $this.data('id');
     $this.testit({
       foo:'bar',
       post:{
         value1: 1,
         value2: id,
         value3: 3
       }
     });
   });
 });

更新＃3

我发现我可以使用settings.post.value2（this）访问该值，但是，我不知道这对我有何帮助。我想我可以遍历对象并评估每个属性，但这看起来并不合适。

如果您的插件应该接受函数作为参数，那么这是非常正常的方法。因此，您可以自行决定如何处理参数。

可能会有一些魅力来改善功能的确定。请参阅How can I check if a javascript variable is function type?。

$(this).click(function(e) {
  console.log(settings.post);
  console.log(settings.post.value2(this)); // <--- here you can add a check if value2 is a simple parameter or function
  // and replace value
  // something like this
  if (isFunction(settings.post.value2)) {
    settings.post.value2 = settings.post.value2(this)
  }
  $.post('testing.php',settings.post);
});

访问和评估jQuery插件中的配置值

1 个答案: