[jQuery] jQuery within Javascript?

[eludlow]

This might not be possible at all - I've tried the code and it's not
working so I'm guessing it probably isn't possible, but it could also
be I've done something wrong!

This is the code i have that works:

[code]
$(document).ready(function(){

$("#bgChangerAnchor1").click(function () {
        $("#mainContainer").css("background","url(backgrounds/bg_1.jpg)");
});


$("#bgChangerAnchor2").click(function () {
        $("#mainContainer").css("background","url(backgrounds/bg_2.jpg)");
});


$("#bgChangerAnchor3").click(function () {
        $("#mainContainer").css("background","url(backgrounds/bg_3.jpg)");
});


$("#bgChangerAnchor4").click(function () {
        $("#mainContainer").css("background","url(backgrounds/bg_4.jpg)");
});


$("#bgChangerAnchor5").click(function () {
        $("#mainContainer").css("background","url(backgrounds/bg_5.jpg)");
});

});[/code]

But I was hoping to condense it down into this:

[code]
$(document).ready(function(){

for (numBackgrounds=5;numBackgrounds<6;numBackgrounds++) {

        $("#bgChangerAnchor"+numBackgrounds).click(function () {
                $("#mainContainer").css("background","url(backgrounds/
bg_"+numBackgrounds+".jpg)");
        });

}


});
[/code]

Any pointers / tips about this would be brilliant, thanks.

All the best,
Ed Ludlow