Javascript 调整jQuery进度目标表以包括待定的进度表

我正在尝试修改GoalMeter jQuery插件，使其包含一个可以与进度表一起显示的待处理量表。我已经创建了一个代码笔，并进行了一些修改，可以在这里查看：

---

这是控制仪表及其垂直高度的功能。正如您在CodePen示例中所看到的，挂起的仪表将覆盖捐赠的仪表。我怎样才能使每一个电表独立呢？

经过一些小小的挠头和反复试验，我终于找到了答案。通过将仪表水平或垂直显示的newCSS更改为progressCSS和pendingCSS，然后删除第一个此函数调用，解决了此问题。在这些更改之后，仪表相互独立地工作和设置动画

然后我计算出每个米的z指数需要切换，这取决于哪个值更低。如果progress值较低，则需要比pending更高的z索引，反之亦然。我附加了上一个示例中更新的函数来显示我的更改

update: function goalMeter_update(options) {
        if (typeof options === "object") {
            this.extendOptions(options);
        }

        // Get the values
        this.goalAmount = this.getGoalAmount();
        this.progressAmount = this.getProgressAmount();
        this.pendingAmount = this.getPendingAmount();

        // Apply some math to this stuff.
        this.progressPercentageAmount = Math.min(
            Math.round(
                this.progressAmount / this.goalAmount * 1000
            ) / 10, 100
        ); //make sure we have 1 decimal point :)

        // figure out the new width/height
        this.progressCSS[ this.isHorizontal ? "width" : "height" ] = this.progressPercentageAmount + "%";

        // Apply some math to this stuff.
        this.pendingPercentageAmount = Math.min(
            Math.round(
                this.pendingAmount / this.goalAmount * 1000
            ) / 10, 100
        ); //make sure we have 1 decimal point :)

        // figure out the new width/height
        this.pendingCSS[ this.isHorizontal ? "width" : "height" ] = this.pendingPercentageAmount + "%";

        // Set the z-index values
        if (this.progressAmount > this.pendingAmount) {
            this.progressCSS[ "z-index" ] = "1";
        }
        if (this.progressAmount < this.pendingAmount) {
            this.pendingCSS[ "z-index" ] = "1";
        }

        // render stuff. Yeah.
        this.render();

    },

更新：功能目标表更新（选项）{
如果（选项类型==“对象”）{
这是扩展（选项）；
}
//获取值
this.goalAmount=this.getGoalAmount（）；
this.progressAmount=this.getProgressAmount（）；
this.pendingAmount=this.getPendingAmount（）；
//把数学应用到这些东西上。
this.progressPercentageAmount=Math.min(
数学圆(
this.progressAmount/this.goalAmount*1000
) / 10, 100
)；//确保我们有1个小数点：）
//计算出新的宽度/高度
this.progressCSS[this.isHorizontal？”宽度“：“height”]=this.progressPercentageAmount+“%”；
//把数学应用到这些东西上。
this.pendingPercentageAmount=Math.min(
数学圆(
this.pendingAmount/this.goalAmount*1000
) / 10, 100
)；//确保我们有1个小数点：）
//计算出新的宽度/高度
this.pendingCSS[this.isHorizontal？“width”：“height”]=this.pendingPercentageAmount+“%”；
//设置z索引值
如果（this.progressAmount>this.pendingAmount）{
这个.progressCSS[“z-index”]=“1”；
}
如果（此.progressAmount<此.pendingAmount）{
这个.pendingCSS[“z-index”]=“1”；
}
//渲染东西，是的。
这个。render（）；
},

我希望这对任何希望通过这个插件或jQuery获得相同结果的人都有帮助

update: function goalMeter_update(options) {
        if (typeof options === "object") {
            this.extendOptions(options);
        }

        // Get the values
        this.goalAmount = this.getGoalAmount();
        this.progressAmount = this.getProgressAmount();
        this.pendingAmount = this.getPendingAmount();

        // Apply some math to this stuff.
        this.progressPercentageAmount = Math.min(
            Math.round(
                this.progressAmount / this.goalAmount * 1000
            ) / 10, 100
        ); //make sure we have 1 decimal point :)

        // figure out the new width/height
        this.progressCSS[ this.isHorizontal ? "width" : "height" ] = this.progressPercentageAmount + "%";

        // Apply some math to this stuff.
        this.pendingPercentageAmount = Math.min(
            Math.round(
                this.pendingAmount / this.goalAmount * 1000
            ) / 10, 100
        ); //make sure we have 1 decimal point :)

        // figure out the new width/height
        this.pendingCSS[ this.isHorizontal ? "width" : "height" ] = this.pendingPercentageAmount + "%";

        // Set the z-index values
        if (this.progressAmount > this.pendingAmount) {
            this.progressCSS[ "z-index" ] = "1";
        }
        if (this.progressAmount < this.pendingAmount) {
            this.pendingCSS[ "z-index" ] = "1";
        }

        // render stuff. Yeah.
        this.render();

    },