Question

I wrote a simple javascript function to display a progressbar with the help of JQuery ProgressBar(check here).

The progressBar function can be set to display different background images with different values. I want to display values in [0, MAX0.3] as red, (MAX0.3, MAX0.7] as orange, and (MAX0.7, MAX] as green. So I write a helper function as follows:

function setBar(bar, cur, total) {
    var v1 = parseInt(total * 0.3);
    var v2 = parseInt(total * 0.7);

    // if I run alert(v1) and alert(v2) here, the values are all right.

    bar.progressBar(cur, {
        max: total,
        textFormat: 'fraction',
        boxImage: '/img/pbar/progressbar.gif',
        barImage: {
            0:  '/img/pbar/progressbg_red.gif',
            v1: '/img/pbar/progressbg_orange.gif',
            v2: '/img/pbar/progressbg_green.gif'
        }
    });
}

The argument cur is the current value while total is the MAX value of the progress bar. The function doesn’t seem to work, but when I replace "v1:" and "v2:" with actual values like 50 and 120, the function works well. And I have also checked the value of v1 and v2 before calling bar.progressBar, they are all right.

So the problem seems that I cannot pass a variable instead of a constant to the function bar.progressBar, I think it maybe have relations with javascript argument evaluation order, is there any fix to this problem?

Answer 1

try building the object before you pass it:

var barImageObj = {};
barImageObj[0] = '/img/pbar/progressbg_red.gif';
barImageObj[v1] = '/img/pbar/progressbg_orange.gif';
barImageObj[v2] = '/img/pbar/progressbg_green.gif';

bar.progressBar(cur, {
    max: total,
    textFormat: 'fraction',
    boxImage: '/img/pbar/progressbar.gif',
    barImage: barImageObj
});

the problem is that javascript interperets {a:'foo'} and {'a':'foo'} as an object with the string key “a”, not with whatever the value of the variable a happens to be