CODEWITHSUNDEEP
javascriptjqueryjquery-ui
acrichm
acrichm

Reputation: 177

JQuery: image src variable clean up

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

Upvotes: 0

Views: 296

Answers (2)

miguelr
miguelr

Reputation: 1344

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.

Upvotes: 1

j08691
j08691

Reputation: 207900

Try:

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

Upvotes: 2

Related Questions