幾個相似功能的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將針對每個元素進行更改。此外，每個元素都會有另一個值和另一個漸變。所以我需要每個遍歷一個對象（？！）的函數，該對象將一個值和一個填充關聯到八個不同的進度條。

來源

2016-07-25 Sam94

那麼這些設置中哪些可以改變？他們都不是，只有梯度和價值？ – 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);

來源

2016-07-25 16:46:01

你讓這款硬盤上你自己。

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;所以你可以有一些函數返回你的配置對象。

來源

2016-07-25 16:54:24

幾個相似功能的jQuery函數

回答

相關問題