初始化后的jQuery插件更新元素

Question

如何将新值传递给公共方法updateText以更新元素中的内容？

当前，当我在单击按钮时将一个新字符串传递给updateText方法时，我只获得作为参数的方法名称，而不是传递的字符串。

​

(function ($) {

    var pluginName = 'testPlugin';
    var defaults = {
        elementText: 'Default element text',
        elementColor: '#fff'
    };

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

        if (this[options]) {
            return this[options].apply(this, Array.prototype.slice.call(arguments, 1));
        } else if (typeof options === 'object' || !options) {
            return this.init.apply(this, arguments);
        }
    }

    // Main methods
    Test.prototype = {
        init: function () {
            this.$element.text(this.options.elementText);
            this.$element.css('color', this.options.elementColor);
        },

        updateText: function (newText) {
            this.$element.text(newText);
        }
    };

    // Create new instances
    $.fn[pluginName] = function (options) {
        return this.each(function () {
            $.data(this, 'plugin_' + pluginName, new Test(this, options));
        });
    }

    // Init
    $('.d-1').testPlugin({
        elementText: 'First element',
        elementColor: 'red'
    })
    $('.d-2').testPlugin({
        elementText: 'Second element',
        elementColor: 'green'
    })
    $('.d-3').testPlugin({
        elementText: 'Third element',
        elementColor: 'blue'
    })

    $('#textChanger').on('click', function() {
        $('.d-3').testPlugin('updateText', 'Third element updated text')
    })

})(jQuery);

body {
  font-family: Arial, Helvetica, sans-serif;
}
button {
  margin-top: 20px;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>

<div class="d-1"></div>
<div class="d-2"></div>
<div class="d-3"></div>
<button id="textChanger">Change text for 3rd element</button>

​

Answer 1

插件封装在元素的data对象中。为了访问它的方法，您必须从data对象调用插件，然后使用它。

代码中的这一行是将带有插件名称的插件封装到初始化插件的元素的数据对象中的原因。

$.data(this, 'plugin_' + pluginName, new Test(this, options));

注意，您的插件名是plugin_testPlugin

​

(function ($) {

    var pluginName = 'testPlugin';
    var defaults = {
        elementText: 'Default element text',
        elementColor: '#fff'
    };

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

        if (this[options]) {
            return this[options].apply(this, Array.prototype.slice.call(arguments, 1));
        } else if (typeof options === 'object' || !options) {
            return this.init.apply(this, arguments);
        }
    }

    // Main methods
    Test.prototype = {
        init: function () {
            this.$element.text(this.options.elementText);
            this.$element.css('color', this.options.elementColor);
        },

        updateText: function (newText) {
            this.$element.text(newText);
        }
    };

    // Create new instances
    $.fn[pluginName] = function (options) {
        return this.each(function () {
            $.data(this, 'plugin_' + pluginName, new Test(this, options));
        });
    }

    // Init
    $('.d-1').testPlugin({
        elementText: 'First element',
        elementColor: 'red'
    })
    $('.d-2').testPlugin({
        elementText: 'Second element',
        elementColor: 'green'
    })
    $('.d-3').testPlugin({
        elementText: 'Third element',
        elementColor: 'blue'
    })

    $('#textChanger').on('click', function() {
        var d3 = $('.d-3').data('plugin_testPlugin');
d3.updateText('Hi There Im updated');

    })

})(jQuery);

body {
  font-family: Arial, Helvetica, sans-serif;
}
button {
  margin-top: 20px;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>

<div class="d-1"></div>
<div class="d-2"></div>
<div class="d-3"></div>
<button id="textChanger">Change text for 3rd element</button>

​