對剩餘項目進行計數以計算百分比

我有一個頁面，用戶必須從屏幕上其他位置的某個區域拖動項目。對剩餘項目進行計數以計算百分比

當所有項目都被拖出 - 完成100％的任務。

我想計算每次拖放操作（當某個項目被拖出灰色區域時）完成的任務的百分比。

如何計算一個區域內的剩餘物品？

如何轉換爲百分比？

我應該計算每個項目的價值在頁面加載的百分比，然後減去？

來源

2011-06-09 santa

「對不起，看來你已經參加了本次可用性測試。」 - 這麼多回去評估代碼... – Niklas 2011-06-09 20:49:10

哈哈同樣在這裏。 – Andy 2011-06-09 20:55:25

哎呀，對不起。測試了一些東西並且意外地離開了。請再試一次。 – santa 2011-06-09 21:02:29

基於克里斯五月的評論，試試這個：

var startCount = $("#launchPad .card").length; 

$(".stack").bind("drop", function(event, ui) { 
    var currentCount = startCount - $("#launchPad .card").length + 1; 
    alert(currentCount/startCount * 100 + "%"); 
});

這因爲從0％的首次下降至100％

小提琴從這裏開始：http://jsfiddle.net/qQdZy/

編輯：這應該解決問題:)

var startCount = $("#launchPad .card").length; 

$(".stack").bind("drop", function(event, ui) { 
    var currentCount = startCount - $("#launchPad .card").length; 
    if (currentCount != startCount) 
     currentCount++; 
    alert(currentCount/startCount * 100 + "%"); 
});

新小提琴：http://jsfiddle.net/qQdZy/1/

新的編輯：好吧，我已經改變了我的解決方案。在這裏它的工作原理：

var startCount = $("#launchPad .card").length; 
var moveFromLaunch = false; 

$(".card").bind("dragstart", function(event, ui) { 
    moveFromLaunch = true; 
}); 

$(".stack").bind("drop", function(event, ui) { 
    var currentCount = $("#launchPad .card").length; 
    if (moveFromLaunch) 
     currentCount--; 
    currentCount = startCount - currentCount; 
    moveFromLaunch = false; 
    alert(currentCount/startCount * 100 + "%"); 
});

小提琴：http://jsfiddle.net/qQdZy/3/

來源

2011-06-15 18:33:56

這太棒了！我想你明白了。 – santa 2011-06-15 20:44:33

只是注意到了一些東西......當我達到100％，然後從一個盒子拖到另一個盒子時，我獲得了100％+ 1的增量。一旦達到它，我需要將其限制在100％。我怎麼做？ – santa 2011-06-16 00:17:56

@santa我編輯了我的答案;） – 2011-06-16 09:09:52

像這樣的東西應該工作。

$(document).ready(function(){ 
    var startCount = $('#launchPad .card').length, 


    $("#dropZone").bind("drop", function(event, ui) { 
     var currentCount = $('#launchPad .card').length; 
     alert(currentCount/startCount); 
    }); 

});

來源

2011-06-09 21:06:24

丟棄事件觸發Droppables（「框」），而不是Draggables（「卡」）。 – 2011-06-09 21:13:16

酷！在PHP中，我可以通過doo floor或ceil來取得結果，這樣的事情可以在jQuery中完成嗎？我不想處理小數...... – santa 2011-06-09 21:15:33

Math.floor（x）Math.ceil（x） – 2011-06-09 22:05:31

對剩餘項目進行計數以計算百分比

回答

相關問題