JQuery Replace Attribute Source Not Working

Question

I have a button named "on" (on.png) and a button named "off" (off.png). They are designed to act as on/off switches, so when clicked, the other should load. Since I don't want to deal with the path (which is the same for both), I am trying to do an attribute replace. The jQuery code below, however, does nothing and I can't find the error. Any help is appreciated.

$('#btnDining').css({'cursor':'pointer'}).on('click', function(e){
   var src = $(this).attr('src');
   $(this).attr('src', function(i, src){
      return (src.indexOf('off.png')!=-1)?src.replace("_off","_on"):src.replace("_on","_off");
   });
}); // end button click

Val · Accepted Answer · 2012-06-04 13:37:06Z

1

You can do that :

$('#btnDining').css({'cursor':'pointer'}).on('click', function(e){
   var src = $(this).attr('src');
   src = (src.indexOf('off.png')!=-1)?src.replace("_off","_on"):src.replace("_on","_off");

   $(this).attr('src', src);
});

And I think, it's a more readable way..

edited Jun 4, 2012 at 13:37

answered Jun 4, 2012 at 13:30

Val

7628 silver badges32 bronze badges

Sign up to request clarification or add additional context in comments.

2 Comments

jgravois Over a year ago

This killed all the scripts on the page but I don't see a syntax error.

Val Over a year ago

I fixed it, forgot a '(' ! Sorry for the mistake

David Hellsing · Accepted Answer · 2012-06-04 15:02:29Z

0

You are over-complicating things. Try something like this:

$('#btnDining').css('cursor','pointer').on('click', function(e){
   this.src = /_off/.test(this.src) ? 
        this.src.replace("_off","_on") : 
        this.src.replace("_on","_off");
}); // end button click

Also, consider using a CSS background-image as you will have more effective and cleaner code if you simply toggle classes and swap background images instead.

edited Jun 4, 2012 at 15:02

answered Jun 4, 2012 at 13:35

David Hellsing

109k44 gold badges181 silver badges214 bronze badges

1 Comment

jgravois Over a year ago

code is fine but background image and toggling classes is much smarter.

Joe · Accepted Answer · 2012-06-04 13:26:51Z

0

You are define src in the function scope of the outer function, then redefining it in the inner function scope.

$('#btnDining').css({'cursor':'pointer'}).on('click', function(e){
   var src = $(this).attr('src');
   $(this).attr('src', function(i, source){
      return (src.indexOf('off.png')!=-1)?src.replace("_off","_on"):src.replace("_on","_off");
   });
}); // end button click

I'm not sure which src is which. However, changing the function variable name in the attr function should fix your issue.

answered Jun 4, 2012 at 13:26

Joe

82.8k18 gold badges130 silver badges147 bronze badges

1 Comment

jgravois Over a year ago

Do I not have to pass in the 'scr' from the outer function to the inner function? If not, then I don't need the var src line at all.

Collectives™ on Stack Overflow

JQuery Replace Attribute Source Not Working

3 Answers 3

2 Comments

1 Comment

1 Comment

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

3 Answers 3

2 Comments

1 Comment

1 Comment

Your Answer

Sign up or log in

Post as a guest

Related