This does seem to simply be a limitation in some versions of IE. But, you seem open to alternatives:
How can I rearrange this to work?
I'm guessing this snippet came from frustration that i
seemed to change value for the .show()
towards the end. That would be due to JavaScript's current lack of block-level scoping and mixing in the asynchronous nature of .mouseover()
, so it would reference i
after the loop had already run to completion and incremented it to showContain.length+1
.
Eventually, you'll be able to use let
in place of var
to create a block-level i
within the loop (the keyword is part of the upcoming ECMAScript 6 standard). But, you can currently use a closure to isolate each value of i
in its own function
scope.
function eachShowcase(i) {
$('#showdiv' + i).mouseover(function(){
$('.showcaseoff').hide();
$('#showcase' + i).show()
});
}
for (var i=0; i<showContain.length+1; i++) {
eachShowcase(i);
}