javascript - jQuery 插件 - 初始化后更新元素

Question

如何将新值传递给公共(public)方法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>