调整jQuery进度目标指标以包括待处理指标

Question

我正在尝试将GoalMeter jQuery插件改编为包括一个待处理仪表，该仪表可以与进度表一起显示。 我创建了一个CodePen，并做了一些修改，可以在这里查看： http ://codepen.io/mikehermary/pen/xwEypo

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

        // Get ze 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.newCSS[ this.isHorizontal ? "width" : "height" ] = this.progressPercentageAmount + "%";

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

        // 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.newCSS[ this.isHorizontal ? "width" : "height" ] = this.pendingPercentageAmount + "%";

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

    },

这是控制仪表及其垂直高度的功能。 正如您在CodePen示例中看到的那样，挂起的计量表将覆盖捐赠的计量表。 如何使每个仪表独立？

Answer 1

经过一些小小的头部抓挠和反复试验后，我已经弄清楚了。 通过将newCSS更改为progressCSS和计量CSS的水平或垂直显示的未决CSS ，然后除去第一个this.render函数调用，解决了该问题。 完成这些更改后，仪表将彼此独立地工作和设置动画。

然后，我确定了需要切换的每米的z索引，具体取决于哪个值较低。 如果进度值较低，则它需要的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();

    },

我希望这可能对希望通过此插件或jQuery实现相同结果的任何人有所帮助。