[jQuery] Re: jQuery within Javascript?
Michael Geary wrote: > The reason your code doesn't work is that you have a single "numBackgrounds" > variable shared throughout all the code. You may increment this in a loop, > but then later on when the .click() callback is called, numBackgrounds has > already been incremented all the way to 6. > > Also your loop should probably start at 1 instead of 5. Great thanks - can't believe I screwed the loop control up, starting at 5brain ache moment! Thanks for all the help, got it sorted out now. Ed
[jQuery] Re: jQuery within Javascript?
The reason your code doesn't work is that you have a single "numBackgrounds"
variable shared throughout all the code. You may increment this in a loop,
but then later on when the .click() callback is called, numBackgrounds has
already been incremented all the way to 6.
Also your loop should probably start at 1 instead of 5.
One way to code it is like this:
$(document).ready(function(){
for( var n = 1; n < 6; ++n )
setupChanger( n );
function setupChanger( n ) {
$( '#bgChangerAnchor' + n ).click( function () {
$('#mainContainer').css(
'background','url(backgrounds/bg_' + n + '.jpg)'
);
});
}
});
By calling the setupChanger() function each time through the loop, the loop
variable is captured in each function call, so when n (I changed the name
for brevity) is later used in the click event handler, it uses *that* value
of n.
This is called a "closure" - it's one of the best features of JavaScript:
http://www.google.com/search?q=javascript+closure
-Mike
> From: 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
>
[jQuery] Re: jQuery within Javascript?
Is there a missed closing braket and a double quotes after bgChangerAnchor?
> $("*[id^='bgChangerAnchor').click(function () {
[jQuery] Re: jQuery within Javascript?
You can use jQuery's each method:
$("*[id^='bgChangerAnchor').each(function () {
// do some stuff here for each item returned by the match
})'
-Original Message-
From: jquery-en@googlegroups.com [mailto:jquery...@googlegroups.com] On
Behalf Of Edward Ludlow
Sent: Tuesday, April 07, 2009 3:58 PM
To: jquery-en@googlegroups.com
Subject: [jQuery] Re: jQuery within Javascript?
MorningZ wrote:
> jQuery *is* JavaScript, keep that in mind
That's why I was confused why my loop won't workis there a reason it
doesn't?
> $(document).ready(function(){
> $("*[id^='bgChangerAnchor').click(function () {
> var id = this.id.replace('bgChangerAnchor', '');
> $("#mainContainer").css("background","url(backgrounds/
> bg_" + id + ".jpg)");
> });
> });
Thanks, will try that. Is there no way I can incorporate a simple for loop
so some other stuff can be performed too?
Thanks for the reply.
Ed
[jQuery] Re: jQuery within Javascript?
MorningZ wrote:
> jQuery *is* JavaScript, keep that in mind
That's why I was confused why my loop won't workis there a reason it
doesn't?
> $(document).ready(function(){
> $("*[id^='bgChangerAnchor').click(function () {
> var id = this.id.replace('bgChangerAnchor', '');
> $("#mainContainer").css("background","url(backgrounds/
> bg_" + id + ".jpg)");
> });
> });
Thanks, will try that. Is there no way I can incorporate a simple for
loop so some other stuff can be performed too?
Thanks for the reply.
Ed
[jQuery] Re: jQuery within Javascript?
jQuery *is* JavaScript, keep that in mind
$(document).ready(function(){
$("*[id^='bgChangerAnchor').click(function () {
var id = this.id.replace('bgChangerAnchor', '');
$("#mainContainer").css("background","url(backgrounds/
bg_" + id + ".jpg)");
});
});
On Apr 7, 3:38 pm, eludlow wrote:
> 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
