javascript - 在 jQuery 中总计和存储以前的数据数字(值)

Question

我正在使用 Easy Pie Chart并稍微修改它以包含多个百分比和旋转以制作完整的饼图。这实际上并不涉及任何与 EPC 相关的内容，但我想我会把它作为背景。

我有以下 HTML:

<div class="home-slider-chart-container">
    <div data-rotate="0" data-percent="2" class="home-slider-chart"></div>
    <div data-rotate="" data-percent="27" class="home-slider-chart"></div>
    <div data-rotate="" data-percent="20" class="home-slider-chart"></div>
    <div data-rotate="" data-percent="40" class="home-slider-chart"></div>
    <div data-rotate="" data-percent="6" class="home-slider-chart"></div>
    <div data-rotate="" data-percent="5" class="home-slider-chart"></div>
</div>

我想用 jQuery 做的是遍历每个 .home-slider-chart 并存储当前和所有以前的 data-percent 之前出现的值然后我将使用它来计算旋转数。

因此，在我的示例中，data-rotate 最终的值将是:

<div data-rotate="0" data-percent="2" class="home-slider-chart"></div>
<div data-rotate="29" data-percent="27" class="home-slider-chart"></div>
<div data-rotate="49" data-percent="20" class="home-slider-chart"></div>
<div data-rotate="89" data-percent="40" class="home-slider-chart"></div>
<div data-rotate="95" data-percent="6" class="home-slider-chart"></div>
<div data-rotate="100" data-percent="5" class="home-slider-chart"></div>

我认为这行得通，但它所做的只是取之前的百分比，而不是将之前的所有百分比相加。

$('.home-slider-chart-container .home-slider-chart').each(function() {
    var thisPercentage = $(this).data('percent');
    var prevPercentage = $(this).prevAll().data('percent');
    var percentageTotal = (thisPercentage + prevPercentage);
    var thisRotation = (percentageTotal / 100 * 360);

    $(this).data('rotate', thisRotation);

});

我已经设置了一个 jsFiddle，这样你就可以看到我正在尝试做什么，你可以将它用作测试环境 https://jsfiddle.net/105o7b5m/1/

Answer 1

您需要在 .each() 循环之外使用一个变量来跟踪运行总计，并且您只需要旋转每个元素之前的运行总计(不包括当前值)，例如:

var runningTotal = 0;
$('.home-slider-chart-container .home-slider-chart').each(function() {
    var thisRotation = (runningTotal / 100 * 360);
    $(this).data('rotate', thisRotation);
    // now update the running total for the next segment
    runningTotal += $(this).data('percent');
});

工作 jsFiddle 演示:http://jsfiddle.net/jfriend00/14rc3zL6/