0

fadeOut 完成后，我不知道如何在匿名函数中访问此特定实例的插件“选项”。

在匿名函数“this”代表 jquery 元素中，我如何访问“options.name”？

这是插件“plugin.js”：

(function ($, window, document, undefined) {

    'use strict';

    var plugin = 'box',
        defaults = {
            wight: 26,
            color: 'white'
        };

    function Plugin(element, options) {
        this.plugin = plugin;

        this.element = element;

        this.options = $.extend({}, defaults, options);

        $(this.element).fadeOut(1000, function () {
            console.log(this.options.name);          // <- how do I access options.name?
        });
    }

    Plugin.prototype = {
        f: function () {
            console.log(this.options.name);
        }
    };

    $.fn[plugin] = function (argument) {
        var method = argument,
            options = argument;

        return this.each(function () {
            if (!$.data(this, 'plugin_' + plugin)) {
                $.data(this, 'plugin_' + plugin, new Plugin(this, options));
            } else if ($.isFunction(Plugin.prototype[method])) {
                $.data(this, 'plugin_' + plugin)[method](Array.prototype.slice.call(arguments, 1));
            } else {
                console.error('unknown method ' + method);
            }
        });
    };
}(jQuery, window, document));

这是'index.html'：

<!DOCTYPE html>
<html class="no-overflow">
    <head>
        <meta charset="UTF-8">

        <title>Table example</title>

        <!-- jqwidgets styles -->
        <style type="text/css">

        </style>

        <!-- jquery framework -->
        <script type="text/javascript" src="../lib-scripts/jquery-1.10.2.min.js"></script>
        <!-- script -->
        <script type="text/javascript" src="plugin.js"></script>
        <script type="text/javascript">
            $(document).ready(function () {
                $('#id-a').box({ name: 'aaaa' });
                $('#id-b').box({ name: 'bbbb' });
                $('#id-a').box('f');
                $('#id-b').box('f');
            });
        </script>
    </head>

    <body>
        <div id="id-a"></div>
        <div id="id-b"></div>
    </body>
</html>

谢谢

4

1 回答 1

3

两种方法，更改 lambda 函数的范围（使用bind），或者创建对变量的独立引用并将其带入闭包：

1：带绑定

$(this.element).fadeOut(1000, function () {
    console.log(this.options.name);          // <- how do I access options.name?
}.bind(this));

引用：

创建一个新函数，在调用该函数时，将其 this 关键字设置为提供的值，并在调用新函数时提供的任何参数之前具有给定的参数序列。

或者

2：作为闭包

var that = this;
$(this.element).fadeOut(1000, function () {
    console.log(that.options.name);          // <- how do I access options.name?
});

引用：

闭包是引用独立（自由）变量的函数。简而言之，闭包的父函数中的变量仍然受父范围的约束。

另请参阅JavaScript 中变量的范围是什么？.

于 2013-10-11T11:47:12.243 回答