Question

在我正在制作的网站上，我需要一个进度条，我发现了一个符合我需求的网站。默认情况下，当达到一定百分比（0-30红色，30-70橙色等）时，它将逐渐改变颜色。我唯一的问题是更改它们，我可以使用静态数字（例如50）轻松设置它们，但是当我尝试动态地执行它时（即：2000 * .3 = 600）它会失败。我不太了解js / jquery所以这对我来说特别困难，如果你能提供帮助那就太好了。我很确定这很简单，我很遗憾。

失败的代码：

var barmax = 2000;
var orangeBound = Math.round(barmax * .3);
var greenBound  = Math.round(barmax * .7);
//alert(orangeBound+":"+greenBound);
$("#pb1").progressBar({ max: barmax, textFormat: 'fraction',
barImage: {
       0: 'images/progressbg_red.gif',
       orangeBound: 'images/progressbg_orange.gif',
       greenBound: 'images/progressbg_green.gif'}
    });

有效但可以使用的代码，因为它必须是动态的：

$("#pb1").progressBar({ max: barmax, textFormat: 'fraction',
    barImage: {
       0: 'images/progressbg_red.gif',
       600: 'images/progressbg_orange.gif',
       1400: 'images/progressbg_green.gif'}
    });

如果您需要查看来源here。再次感谢！

Answer 1

在JS中，{orangeBound：“foo”}只会产生一个名为“orangeBound”的键，其中包含值“foo”。您必须单独构建对象：

var barImages = {0: 'images/progressbg_red.gif'};
barImages[orangeBound] = 'images/progressbg_orange.gif';
// ...
$(...).progressBar({..., barImage: barImages});

Answer 2

问题是使用orangeBound作为对象文字中的键意味着使用字符串"orangeBound"，而不是变量的值。相反，尝试像这样构建对象：

var barImage = {0: 'images/progressbg_red.gif'};
barImage[orangeBound] = 'images/progressbg_orange.gif';
barImage[greenBound] = 'images/progressbg_green.gif'
var barmax = 2000;
var orangeBound = Math.round(barmax * .3);
var greenBound  = Math.round(barmax * .7);
$("#pb1").progressBar({
    max: barmax,
    textFormat: 'fraction',
    barImage: barImage
});

传递var作为参数

2 个答案: