带有全局变量的IE错误。 如何绕过此错误？

Question

As title says i have some problems with IE8 and Javascript. It's known about its bug in interpretation of global variables: simply it does not get them if you don't declare as:

var variable1 = something;

The problem it's i'm trying to make a script that change the body background clicking on a button and i need a global variable wrapping the actual status (what bg-x.png i'm loading). This script work on FF, Safari and Chrome but not, obviously, on IE. Help? (the problem is on the variable "status")

$('#change').click(function() {
    var numStates = 2;
    var name = $(this).text();

    if(!(status)) {
        status = parseInt(1,10);
    }

    if(status<numStates) {
        status = parseInt(status,10) + 1;
    }
    else {
     status = parseInt(1,10);
    }


    alert(status);


    var bgvar = null;

    switch(parseInt(status,10)) {
        case 1: var bgvar = ' #7097ab url(./img/bg-' + status + '.png) top center repeat';
        var name = 'Pattern';
        break;
        case 2: var bgvar = ' #7097ab url(./img/bg-' + status + '.png) top center repeat-x';
        var name = 'Sfumato';
        break;
        default: alert('Default');
    }

    $('body').css({
        background:bgvar,
    });

    $(this).text(name);


}
);

Working code even with IE (Thanks to Zeta):

$('#change').click(function() {
   var numStates = 2;
   var name = $(this).text();

// If data-status isn't defined set it to the initial value
if($('body').data('status') === undefined)
    $('body').data('status',1);

// Extract the status
var status = parseInt($('body').data('status'),10);

// Handle the status
if(status < numStates)
    status++;
else
    status = 1;

// Save the status
$('body').data('status',status);




    switch(status) {
        case 1: bgvar = ' #7097ab url(./img/bg-' + status + '.png) top center repeat';
        name = 'Pattern';
        break;
        case 2: bgvar = ' #7097ab url(./img/bg-' + status + '.png) top center repeat-x';
        name = 'Sfumato';
        break;
        default: alert('Default');
    }

    $('body').css({
        background:bgvar,
    });

    $(this).text(name);


}
);

Answer 1

status is a predefined member of the window-object and points to the content of the statusbar. Use another variable-name

Answer 2

Since you're already using jQuery you could use .data() instead of global variables:

$('#change').click(function() {
    var numStates = 2;
    var name = $(this).text();

    // If data-status isn't defined set it to the initial value
    if($('body').data('status') === undefined)
        $('body').data('status',1);

    // Extract the status
    var status = parseInt($('body').data('status'),10);

    // Handle the status
    if(status < numStates)
        status++;
    else
        status = 1;

    // Save the status
    $('body').data('status',status);

    /* ... Rest of your code ... */

Note that this won't work in XML documents in IE (according to the jQuery doc).

Answer 3

Do you know when to use »var«? I just cleaned your code in the follwing ways:

1. Add "var status;" to make it a local variable
2. Delete "var" for already defined variables in your switch statement

3. Delete the unnecessary comma behind "background: bgvar" which will cause errors in IE

    $('#change').click(function () { var numStates = 2; var name = $(this).text(); var status; if (!(status)) { status = parseInt(1, 10); } if (status < numStates) { status = parseInt(status, 10) + 1; } else { status = parseInt(1, 10); } alert(status); var bgvar = null; switch (parseInt(status, 10)) { case 1: bgvar = ' #7097ab url(./img/bg-' + status + '.png) top center repeat'; name = 'Pattern'; break; case 2: bgvar = ' #7097ab url(./img/bg-' + status + '.png) top center repeat-x'; name = 'Sfumato'; break; default: alert('Default'); } $('body').css({ background: bgvar }); $(this).text(name); }); 

Does it work now?

PS Use http://www.jshint.com/ to prevent those kind of errors.