JQuery: image src variable clean up

Question

I've been teaching myself how to use jquery the past few days, haven't used it much, i'm kinda still stuck in old ways (back 10 yrs ago lol) To get started i downloaded the JQuery Desktop from JQuery Desktop - Nathan Smith, to keep from repetitive use of image src links inevatibly making the file larger than what it needs to be. So while making the reference variables basically started to use the same stuff over again... i tried looking up to see how to compress it or clean it up some but kept running into dead ends for what i am trying to do... if anyone happens to know what i could do that would be awesome.

Code

enter code here
            /*  SAVES DATA SPACE ALSO CREATES QUICK REFFERENCE/VARIABLE */
            var healthVar= 'assets/img/icons/health.png';
            var emailVar = 'assets/img/icons/email.png';
            var linkVar = 'assets/img/icons/link.png';
            var noteVar = 'assets/img/icons/note2.png';
            var videoVar = 'assets/img/icons/video1.png';
            var xxxVar = 'assets/img/icons/xxx.png';
            var socialVar = 'assets/img/icons/social.png';
            var webdesktopVar = 'assets/img/icons/webdesktop.png';
            var androidVar = 'assets/img/icons/android.png';
            var devVar = 'assets/img/icons/development.png';
            var secureVar = 'assets/img/icons/secure.png';
            var signalVar = 'assets/img/icons/signal.png';
            var setVar = 'assets/img/icons/settings.png';
            var spamVar = 'assets/img/icons/spam.png';
            var feedbackVar = 'assets/img/icons/feedback.png';

            $("#health_Pic").attr("src", healthVar);$("#health_PicB").attr("src", healthVar);$("#health_PicC").attr("src", healthVar);
            $("#email_Pic").attr("src", emailVar);$("#email_PicB").attr("src", emailVar);$("#email_PicC").attr("src", emailVar);
            $("#link_Pic").attr("src", linkVar);$("#link_PicB").attr("src", linkVar);$("#link_PicC").attr("src", linkVar);
            $("#note_Pic").attr("src", noteVar);$("#note_PicB").attr("src", noteVar);$("#note_PicC").attr("src", noteVar);
            $("#video_Pic").attr("src", videoVar);$("#video_PicB").attr("src", videoVar);$("#video_PicC").attr("src", videoVar);
            $("#social_Pic").attr("src",socialVar);$("#social_PicB").attr("src", socialVar);$("#social_PicC").attr("src", socialVar);
            $("#webdesktop_Pic").attr("src",webdesktopVar);$("#webdesktop_PicB").attr("src",webdesktopVar);$("#webdesktop_PicC").attr("src",webdesktopVar);
            $("#android_Pic").attr("src",androidVar);$("#android_PicB").attr("src",androidVar);$("#android_PicC").attr("src",androidVar);
            $("#dev_Pic").attr("src",devVar);$("#dev_PicB").attr("src",devVar);$("#dev_PicC").attr("src",devVar);
            $("#secure_Pic").attr("src",secureVar);$("#secure_PicB").attr("src", secureVar);$("#secure_PicC").attr("src", secureVar);
            $("#signal_Pic").attr("src", signalVar);$("#signal_PicB").attr("src", signalVar);$("#signal_PicC").attr("src", signalVar);
            $("#settings_Pic").attr("src", setVar);$("#settings_PicB").attr("src", setVar);$("#settings_PicC").attr("src", setVar);
            $("#spam_Pic").attr("src",spamVar);$("#spam_PicB").attr("src", spamVar);$("#spam_PicC").attr("src", spamVar);
            $("#feedback_Pic").attr("src", feedbackVar);$("#feedback_PicB").attr("src", feedbackVar);$("#feedback_PicC").attr("src", feedbackVar)

I have tried to do this:

$("#health_Pic","#health_PicB","#health_PicC").attr("src", healthVar);

With no luck, thanks for any info a head of time

j08691 · Accepted Answer · 2012-04-30 02:26:41Z

2

Try:

$("#health_Pic,#health_PicB,#health_PicC").attr("src", healthVar);

answered Apr 30, 2012 at 2:26

j08691

209k33 gold badges269 silver badges281 bronze badges

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

2 Comments

acrichm Over a year ago

lol something so simple always stumps me and prob. everyone else also.. thanks

j08691 Over a year ago

No problem, glad I could get that straightened out for you.

miguelr · Accepted Answer · 2012-04-30 02:59:43Z

1

The jQuery attr function takes only the first element obtained by the selector.

Get the value of an attribute for the 
first element in the set of matched elements.

Use a loop to change multiple images src.

EDIT: After checking the docs and trying it myself, I found that using the .attr as a setter does set the value for all elements. Thanks j08691 for pointing this out.

edited Apr 30, 2012 at 2:59

answered Apr 30, 2012 at 2:23

miguelr

1,34416 silver badges21 bronze badges

5 Comments

acrichm Over a year ago

ahh that explains why i had to make A - B - C and so on.. if i woulda tried to read through the docs i woulda spent hours rummaging through all that getting side tracked etc.. but thanks a lot, i didn't even think of using a a loop at all ,,

j08691 Over a year ago

You're reading the explanation incorrectly. What it means is that if you used code like $('div').attr('src',healthVar) that only the first div jQuery finds would have the src attribute changed, not that it only changes one item. In jQuery you can always pass multiple elements as part of your selector.

acrichm Over a year ago

okay, so like in say div1 you have 4 images div2 has 6 images. $('div1').attr('src',healthVar) would only change the images in div1 right? (thanks for taking the time to explain it for me, i do appreciate it)

j08691 Over a year ago

@acrichm - Well first no, $('div1') wouldn't select anything since div1 isn't an element. If div1 was the ID of an element, then you'd select it with $('#div1') (note the #). But moreover, even if you did select an element with the ID of div1, you'd still need to select the images within it like $('#div1 img'). But then that would only change the first img found within that div. To select every image you would use .each(), like $('#div1 img').each(function(){$(this).attr('src',something)}).

acrichm Over a year ago

i was under thinking it, i understand what your saying now.. gonna head over and read up in the docs on those to fully(hopefuly) understnad it all lol thanks again though youve been alot of help and informative for me

Collectives™ on Stack Overflow

JQuery: image src variable clean up

2 Answers 2

2 Comments

5 Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

2 Comments

5 Comments

Your Answer

Sign up or log in

Post as a guest

Related