將jQuery進度條更新爲100％的Mod或33％功能

根據所有3個組中的一個或多個項目，如何處理進度條更新爲100％？將jQuery進度條更新爲100％的Mod或33％功能

例如，如果我有20個水果，0粒和2個蔬菜，它應該顯示66/67％。如果我有來自每個組的一個或多個項目，則顯示100％;並且只有1個或更多的1個組應顯示33/34％完成。我不確定我應該整理一下，還是在這裏使用mod。絕對需要幫助...

$(document).ready(function($){ 

$("#progressbar").progressbar(); 

var fruits = parseInt($("li#num-of-fruits").text()); 
var veggies = parseInt($("li#num-of-veggies").text()); 
var grains = parseInt($("li#num-of-grains").text()); 

if (fruits > 0) { var fruitsMod = 1 } 
else { var fruitsMod = 0 } 

if (veggies > 0) { var veggiesMod = 1 } 
else { var veggiesMod = 0 } 

if (grains > 0) {var grainsMod = 1} 
else { var grainsMod = 0 } 

var foodSum = 33.33 * (fruitsMod + veggiesMod + grainsMod); 

$("#progressbar").progressbar("option", "value", Math.round(foodSum)); 

$("<span>").attr("id", "food-amount").text($("#progressbar").progressbar("option", "value") + "%").prependTo("h3#completeness"); 

});

HTML只是一個空的div＃progressbar。 Progressbar是jQuery UI插件版本。

來源

2010-10-19 kinet

你只是尋找一個更好的方法來確定的百分比是多少？ – drudge 2010-10-20 00:05:38

是的，這是有效的，但是分配額外的var（例如fruitsMod）並且乘以33和舍入看起來好像是漫長的一樣。我只是不太瞭解jquery，並且認爲有人知道更簡單的方法來做到這一點。 – kinet 2010-10-20 00:12:09

您可以用'條件表達式' – drudge 2010-10-20 00:24:19

這應該爲你節省6號線和150個字節：

var fruitsMod = (parseInt($("li#num-of-fruits").text()) > 0 ? 1 : 0); 
var veggiesMod = (parseInt($("li#num-of-veggies").text()) > 0 ? 1 : 0); 
var grainsMod = (parseInt($("li#num-of-grains").text()) > 0 ? 1 : 0); 

var foodSum = (100/3) * (fruitsMod + veggiesMod + grainsMod);

來源

2010-10-20 00:30:26 drudge

我只是添加了parseInt的基數參數：var fruitsMod =（parseInt（$（「li＃num-of-fruits」）.text（），10）> 0？1：0）;' – 2010-10-20 00:35:12

將jQuery進度條更新爲100％的Mod或33％功能

回答

相關問題