如何使 jquery 插件在用户定义的元素上工作

Question

我正在制作一个基本的 jQuery 插件，用户可以使用它来更改背景颜色、字体颜色等。

我希望插件的用户能够定义这些更改生效的元素。

我知道我必须使用“this”，但我不知道该怎么做。

这是插件的代码

(function($, window, document, undefined){
//Define your own variables first

var wrapper = $('.wrapper');
var p = $('p');

//Define the default settings here
var settings = {
    textColor: 'red'
};


//Write your methods here
var methods = {
    //Call this method to initialize the plugin
    init: function(){
        console.log("Initialize the plugin");
        $('input').on('change', methods.changeColor);
        $('select').on('change', methods.changeFont);
        $('.slider').on('change', methods.changeWidth);
    },

    changeColor: function(){
        console.log("This will change the background and/or font color");

        var userBackgroundColor = $("#userBackgroundColor").val();
        var userTextColor = $("#userTextColor").val().toLocaleLowerCase();

        wrapper.css({
            backgroundColor: userBackgroundColor,
            color: userTextColor
        });
    },

    changeFont: function(){
        console.log("This will change the font");

        var userFontSize = $("option:selected").val();

        console.log(userFontSize);

        p.css({
            fontSize: userFontSize + 'em'
        })
    },

    changeWidth: function(){
        var p = $('p');
        var userWidth = $(".slider").val();

        var widthFontChange = userWidth / 20;

        if (widthFontChange == 1) {
            p.css({
                width: userWidth + '%',
                fontSize: widthFontChange + 'em'
            });
        }


        else {
            widthFontChange = userWidth / 2;
            p.css({
                width: userWidth + '%',
                fontSize: widthFontChange + 'px'
            })
        }
    }

};



//Actual plugin call
$.fn.pluginName = function(options){
    //If the user overrides defaults by setting his own options
    if(options){
        settings = $.extend(settings, options);
    }
    //Put any eventHandlers here, like this:
    this.on('change', methods.changeColor);
    this.on('change', methods.changeFont);
    this.on('change', methods.changeWidth);

    //Init the plugin with the $selector
    methods.init(this);

    //Return this for jQuery chaining
    return this;
};
}(jQuery, window, document));

这是用户可以在其中定义插件必须工作的对象的文件

$(document).ready(function(){
$('body').pluginName();
});

我的问题是，如何按照我想要的方式进行这项工作？

Answer 1

如果我正确理解了您的问题，您希望提供设置以选择各种组件来监听更改。如果是这样……

将 jQuery this 和 options 传递给您的 init 方法，因此它拥有将事件连接到特定子元素所需的一切。

我改用on 的委托版本，因为它可以在动态变化中存活。

JSFiddle：http://jsfiddle.net/CgGjq/6/

关键部分是

init: function ($element, options) {
            console.log("Initialize the plugin");
            $element.on('change', options.input || 'input', methods.changeColor);
            $element.on('change', options.select || 'select', methods.changeFont);
            $element.on('change', options.slider || '.slider', methods.changeWidth);
        },

它使用选项中的属性来覆盖选择器（如果未提供，则默认为您的插件默认设置）。

然后您可以将其与以下选项一起使用：

$(document).ready(function () {
    $('body').pluginName({
        select: '#userFontSize', // Override the selectors etc
        slider: "#userWidth.slider"
    });
});