几个相似功能的jQuery函数

问题描述：

我使用jquery-circle-progress plugin向我的网站绘制一些圆形进度条。几个相似功能的jQuery函数

现在，在我的情况下，“一”是八，所以我有八个相当巨大的定义每个进度栏。

现在我想知道是否有可能将其分解为更小的代码片段。我可以将所有配置代码作为函数写入变量，然后为八个不同的进度条添加值。

但是，如果需要几个变量，这是如何工作的？

这里是那些进度条之一的代码：

var e = $('.element1'), 
    inited_e = false; 

e.circleProgress({ 
    value: 0, 
    size: size 
}); 

e.appear(
    { force_process: true } 
); 

e.on('appear', function() { 
    if (!inited_e) { 
    e.circleProgress({ 
     value: 0.85, 
     size: size, 
     lineCap: "round", 
     fill: { 
     gradient: ["#00C853", "#00E676"] 
     } 
    }); 

    inited_e = true; 

    } 

});

那么，是什么在此配置变量？首先是脚本所依赖的元素，所以e将针对每个元素进行更改。此外，每个元素都会有另一个值和另一个渐变。所以我需要每个遍历一个对象（？！）的函数，该对象将一个值和一个填充关联到八个不同的进度条。

那么这些设置中哪些可以改变？他们都不是，只有梯度和价值？ – adeneo

https://jsfiddle.net/pw7sjhtt/1/ – adeneo

@adeneo谢谢，这看起来不错，但我忘了，每个进度条的inited变量必须不同，因为它被设置为true ...所以元素一会像inited_e1，元素2 inited_e2等等。我该怎么做？ – Sam94

答

可以重构您的代码如下所示：

var conf={ 
     size: size, 
     lineCap: "round", 
     fill: { 
     gradient: ["#00C853", "#00E676"] 
     } 
    };

然后：

function circlify(selector,value){ 
     conf.value=value; //override value for each element 
     var e = $(selector),inited_e = false; 

     e.circleProgress({value: 0, size: size}); 

     e.appear({ force_process: true }); 

     e.on('appear', function() { 
      if (!inited_e) { 
       e.circleProgress(conf); // here set conf object 
       inited_e = true; 

     } 

     }); 

}

然后，用你的API：

circlify('#element1',0.75); 
circlify('#element2,#element3',0.5);

答

你让这款硬盘上你自己。

var e = $('.element1'), 
inited_e = false;

e是元素，因为您声明它是元素。你可以让任何你需要的圈子（我会重新命名为circleElement）。

现在我们只设置您的配置。

var circleProgElement1 = { value: 0, 
    size: size}; 
var circleProgElement2 = {value: 1, size: 283974}; 
var appearelement1 = {force_process : true}; 
//etc 
var configElement1 = { 
    value: 0.85, 
    size: size, 
    lineCap: "round", 
    fill: { 
    gradient: ["#00C853", "#00E676"] 
    } 
}; 

var configElement2 = { 
    value: 10.85, 
    size: size, 
    lineCap: "whatever", 
    fill: { 
    gradient: ["#000", "#FFF"] 
    } 
} 

circleElement1.circleProgress(circleProgElement1); 
circleElement2.circleProgress(circleProgElement2); 
//etc 
    circleElement1.appear(appearelement1); 
circleElement1.on('appear', function() { 
if (!inited_e) { 
    this.circleProgress(configElement1); 
inited_e = true; 
}});

你可以做类似的事情，并将所有的配置存储到变量中。但是现在你有了很多变数，我们该怎么做。

我们将它们组合起来：d

var configElement1 = { 
    circleProg1 : { value: 0, size: size }, 
    appear : { force_process: true }, 
    circleProgend: { 
     value: 0.85, 
     size: size, 
     lineCap: "round", 
     fill: { 
     gradient: ["#00C853", "#00E676"] 
     }, 
}

现在你只需调用属性（即您的配置对象），到你需要的方法;

e.circleProgress(configElmeent1.circleProg1); 
e.appear(configElement1.appear); 
e.on("appear",{closure : configElement } ,function(event){ 
    if(w/e){ e.circleProgress(closure.circleProend);}; 
    //we need to add the data property because we are in a different scope so  //just pass the closure into the jq func. 
    });

您也可以在e上设置您的配置，然后重新声明e并重用这些变量。除非你因任何原因需要var。

所以E = $（ “firstCircle）; e.whatever; E = $（”。secondCirlce“）; e.setmyconfigs;或者只是有配置变量，并保持分配给它
权即？ appear.force_process = false;所以你可以有一些函数返回你的配置对象。

几个相似功能的jQuery函数

相关推荐