调整jQuery进度目标表，使其包含待处理表

Adapt jQuery progress goal meter to include pending meter

本文关键字：包含待 处理 调整 目标 jQuery      更新时间：2023-09-26

我正试图调整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示例中看到的，挂起的仪表覆盖了捐赠的仪表。怎样才能使每个仪表独立?

经过一些小小的挠头和试错，我终于弄明白了。通过将仪表水平或垂直显示的newCSS更改为progressCSS和pendingCSS，然后删除第一个this，解决了这个问题。render函数调用。在这些变化之后，仪表的工作和动画相互独立。

然后我计算出每个仪表的z指数需要切换，这取决于哪个值更低。如果进度值较低，则需要比pending更高的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实现相同结果的人有所帮助。

相关文章：