Switching between Jquery

So my goal is to switch the background image based on the information stored in the parameter. Is this the right way to go about my goal? :slight_smile:

      switch(icon){
       case "clear-day":
         $("#pic").css("background-img", "url(https://res.cloudinary.com/simpleview/image/upload/c_fill,f_auto,h_541,q_60,w_636/v1/clients/monterey_county/carmel_valley_vineyards_monterey_convention_authority_rgb_fs_812147be-f3d0-8b32-ceaea972937348ae.jpg)");
         break;
       case "clear-night":
         $("#pic").css("background-img", "url(https://s-media-cache-ak0.pinimg.com/736x/da/19/2e/da192efc764289e14f4365ba41ca33d9--monterey-bay-cas.jpg)");
         break;
       case "rain": 
        $("#pic").css("background-img", "url(http://image.montereyherald.com/storyimage/NF/20151001/NEWS/151009967/AR/0/AR-151009967.jpg&maxh=400&maxw=667)");
        break;
       case "snow":
         $("#pic").css("background-img", "url(http://www.skilaketahoe.com/wp-content/forum/uploads/2015/08/social-conditions-twitter.jpg)");
         break; 
       case "sleet":
         $("#pic").css("background-img", "url(http://i.telegraph.co.uk/multimedia/archive/02802/POTD-weather--3_2802903b.jpg)");
         break; 
       case "wind":
         $("#pic").css("background-img", "url(http://www.donsmithblog.com/wp-content/forum/uploads/2012/09/wind-swept-cypress-fb.jpg)");
         break; 
       case "fog":
         $("#pic").css("background-img", "url(https://s-media-cache-ak0.pinimg.com/originals/6a/c2/24/6ac22427995253a06ec0595138fb2d98.jpg)");
         break; 
       case "cloudy":
        $("#pic").css("background-img", "url(https://media-cdn.tripadvisor.com/media/photo-s/07/1b/92/f4/on-a-cloudy-day.jpg)");
         break; 
       case "partly-cloudy-day":
         $("#pic").css("background-img", "url(https://annimalhouse.files.wordpress.com/2017/05/2017-05-28-15-40-54.jpg?w=900)");
         break; 
       case "partly-cloudy-night":
         $("#pic").css("background-img", "url(https://ak2.picdn.net/shutterstock/videos/14856850/thumb/1.jpg)");
         break;
  }                   }

The css property name is “background-image” so I believe that is what you should be using instead of “background-img”.

I honestly don’t mean this to to sound rude but why wouldn’t you just try it and see?

A switch performs a comparison In your case:

Is icon equal to the case value? If yes change the background image with qQuery. If no go to the next case. Is the icon equal to the new case value? If yes change. If yes change the background image with jQuery and break and don’t test any further cases.

It appears you are going about this properly. As always test your code, see what works, what doesn’t, keep trying - read - and ask for help when needed :slight_smile:

I did, it’s not working, perhaps I explain myself well enough. :blush:

Oh well thank you for clarifying that. Can you show us a codepen link so it’s easier for us to debug for you?

Yes, icon is a variable that contains selected JSON data. Sounds like a syntax issue, let me fix that and see if the solves the issue. Thanks guys :slight_smile:

1 Like

Alright, if you still need help please post a codepen link, it makes it a lot easier for us to debug.

Worked perfectly! Thank you!

1 Like