0

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

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

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

更新：

如果我调用 optionA，当您在文本字段中输入文本时会出现一个下拉菜单，选择后会过滤表格。如果我调用 optionB，则不会出现下拉菜单，而是会自动过滤表格。因此，这两个选项在同一个对象上提供了不同的功能。本质上，如果我传入 optionA 参数，我只希望插件中的 optionA 代码被执行，如果我传入 optionB，我只希望插件中的 optionB 代码被执行。

这是基本的插件结构：

(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
});

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

4

2 回答 2

2

现场演示

(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

});
于 2013-11-12T19:59:11.180 回答
0

尝试：

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

和

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

就像css函数一样：

$(".element").css({color:"#f65", display:"block"});
于 2013-11-12T19:56:23.493 回答