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>