Something awry about my .show() and .hide() action conditional

Question

OK, so I'm working on this unique background project here, and I have a problem:

I'm trying to hide certain parts of my background on page load, which works great.

However, my other lines of code I provide below try to make some of them reappear when the link has a certain class, however, even though I know that the link has that class (according to FireBug) once I click on the link (due to the jPlayer plugin I'm using) the code still won't work.

Here is the code:

$("#bg_3, #bg_4, #map_4, #sprites_4, #platforms_4, #bg_5, #bg_6, #map_6, #sprites_6, #bg_7, #bg_8, #map_8, #sprites_8").hide();

 if($('a#jplayer_playlist_item_1').hasClass('jplayer_playlist_current')) {
  $("#bg_1, #bg_2, #map_2, #sprites_2, #bg_5, #bg_6, #map_6, #sprites_6, #bg_7, #bg_8, #map_8, #sprites_8").hide();
  $("#bg_3, #bg_4, #map_4, #sprites_4, #platforms_4").show();
 };

Site: Mario Planet

Thanks!

Answer 1

When does your code run? From what you posted, it looks like it only runs once. You need to continuously check whether the link's class has changed. One possible solution is to create a timed event that checks every so often:

setInterval(function() {
  $("#bg_3, #bg_4, #map_4, #sprites_4, #platforms_4, #bg_5, #bg_6, #map_6, #sprites_6, #bg_7, #bg_8, #map_8, #sprites_8").hide();

  if($('a#jplayer_playlist_item_1').hasClass('jplayer_playlist_current')) {
   $("#bg_1, #bg_2, #map_2, #sprites_2, #bg_5, #bg_6, #map_6, #sprites_6, #bg_7, #bg_8, #map_8, #sprites_8").hide();
   $("#bg_3, #bg_4, #map_4, #sprites_4, #platforms_4").show();
  };
}, 1000); // checks every 1000 msec (i.e. 1 second)