JQuery:将参数传递给插件以限制代码执行

Question

我是 JQuery 的新手，想知道我应该如何将参数传递给一个插件，以限制插件内部的哪些代码被执行？

基本上，我想以以下两种方式之一调用插件：

$(".element").plugin(optionA);
$(".element").plugin(optionB);

更新：

如果我调用选项A，则当您在文本字段中键入文本时，会出现一个下拉菜单，该菜单在选择后会过滤表格。 如果我调用选项B，则下拉菜单不会出现，而是自动过滤表。 因此，这两个选项在同一对象上提供不同的功能。 本质上，如果我

传入选项A参数，我只希望执行插件中的选项A代码，并且如果我传入选项B，我只希望执行插件中的选项B代码。

这是基本的插件结构：

(function ($) {
    $.fn.plugin = function (options) {
        var settings = $.extend({
            //Default Settings
        }, options);
        return this.each(function () {
            //Do some code here
        });
    };
 } (jQuery)); 

所以我的问题是：

将参数传入何处？

我需要执行以下操作吗？

    (function ($, optionA, optionB) { ...    

然后，当我返回 .each（） 函数时，执行以下操作：

return this.each (function () {
    if (optionA) { //execute code}
    else if (optionB) { //execute code}
};

还是更像这样：

return this.each ( function (optionA) {
    //Do optionA code here
});
return this.each ( function (optionB) {
    //Do optionB code here
});

还是两者都不是？？如果是这样，它是如何完成的？

Answer 1

现场演示

(function ($) {
    $.fn.plugin = function (options) {
        var settings = $.extend({
          filter : "optionA"   // use A by default
        }, options);
        return this.each(function () {
           if(settings.filter == "optionA"){
               // DO SOMETHING HERE BY DEFAULT
           }else if(settings.filter == "optionB"){
               // DO SOMETHING IF "optionB" WAS SET
           }
        });
    };
 }(jQuery)); 

$(function(){ // DOM READY
  // $(".element").plugin();                   // will use A
  // $(".element").plugin({filter:"optionA"}); // will use A
  // $(".element").plugin({filter:"optionB"}); // will use B
});

Answer 2

尝试：

var options = {
     optionA: value1,
     optionB: value2,
     optionC: value3,
};

和

$(".element").plugin(options);

就像css函数一样：

$(".element").css({color:"#f65", display:"block"});