jquery插件 - 如何使$(this)在自定义设置的上下文中工作

时间:2013-10-07 10:09:07

标签: jquery

以下是我想要做的事情的简化版本。

我正在尝试设置如下所示的自定义选项,但如何在wring上下文中使用$(this)。如何编写它以便主要对象获得使用而不是函数中的这个,现在我得到一个fnode错误。

beforeDOTHIS: function () { 

                        $(this).css({color:'blue'});
                        alert($(this).text());

                    } 

http://jsfiddle.net/Dpeae/

HTML

<div>




    <div id="One">test1</div>

    <br />
    <br />
    <br />

    <div id="Two">test2</div>

    <br />
    <br />
    <br />

    <div id="Three">test3</div>


</div>

的javascript

  /* To be moved to own custom js plugin file ------------------------------------------- */

                //custom plugin
                $.fn.addMySpan = function (customOptions) {

                    var defaults = {
                        textColor: "#033",
                        beforeDOTHIS: function () {}
                    };

                    var settings = $.extend({}, defaults, customOptions);

                   return this.each(function () {

                       settings.beforeDOTHIS();

                  });

                };

        /* -----------------------------------------------------------------------------------------------------*/



        $(document).ready(function () {

            $('#One,#Two,#Three').addMySpan({
                textColor: "red",
                beforeDOTHIS: function () { 

                    $(this).css({color:'blue'});
                    alert($(this).text());

                } 
            });




        });

1 个答案:

答案 0 :(得分:1)

存储对this的引用,然后将其设置为call的函数上下文:

            var self = this;

            var defaults = {
                textColor: "#033",
                beforeDOTHIS: function () {}
            };

            var settings = $.extend({}, defaults, customOptions);

            return this.each(function () {

               settings.beforeDOTHIS.call(self);

           });