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 并将 pendingCSS 更改为电平表的水平或垂直显示，然后删除第一个 .render 函数调用。在这些变化之后，仪表可以相互独立地工作和动画。

然后我想出每个仪表需要切换的z索引，具体取决于哪个值更低。如果进度值较低，则需要比挂起的z-index更高的z-index，反之亦然。我附上了上一个示例中的更新函数以显示我的更改。

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获得相同结果的任何人都有帮助。

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

1 个答案: