0
\$\begingroup\$

I have 12 games that I need to sort through that each have a date and img string. I'm fairly new to jQuery and was wondering what is the best way to accomplish this. Is there a way that I can run this through a loop of some sort rather than having 12 else-if statements like I currently have (code condensed to 3 for readability)? This code works, I was just looking for the cleaner more concise way of writing it.

var now = new Date();
boise = { date: new Date ('May 15, 2012'), img: 'Boise' };
central = { date: new Date ('May 21, 2012'), img: 'Central' };
notreDame = { date: new Date ('May 27, 2012'), img: 'NotreDame' };
    ...
banner = $('#nextGameBanner');
imgDir = 'images/nextGame';


if (now < boise.date ) {
    banner.attr('src', imgDir+boise.img+'.jpg');
}
else if (now < central.date) {
    banner.attr('src', imgDir+central.img+'.jpg');
}
else if (now < notreDame.date) {
    banner.attr('src', imgDir+notreDame.img+'.jpg');
}
    ...

HTML

<img src="/website/images/nextGame.jpg" id="nextGameBanner" />
\$\endgroup\$
  • \$\begingroup\$ Since you are applying the same function across different variables, look into implementing a partial function and simply change the variable to be the game name you are referencing. \$\endgroup\$ – acconrad May 14 '12 at 19:07
  • \$\begingroup\$ @j08691: The moderators prefer that you flag such things for their attention, that way they can move the question and avoid duplicate posts on different sites. \$\endgroup\$ – mu is too short May 14 '12 at 19:36
  • \$\begingroup\$ @muistooshort - it was just a suggestion for the OP. Wasn't sure if that was the best spot and whether it needed to be moved. \$\endgroup\$ – j08691 May 14 '12 at 19:38
1
\$\begingroup\$

Try something like this:

if (now.getTime() < boise.date.getTime() ) {
    banner.attr('src', imgDir+boise.img+'.jpg');
}
.....

In total,

var now = new Date();
    objs = { 
        // here I change your 12 variables to a single object, so I can loop over them
        boise : { date: new Date ('May 15, 2012'), img: 'Boise' },
        central : { date: new Date ('May 21, 2012'), img: 'Central' },
        notreDame : { date: new Date ('May 27, 2012'), img: 'NotreDame' }
    },
    banner = $('#nextGameBanner'),
    imgDir = 'images/nextGame';

// making loop with objs

$.each(objs, function(key, singleObj) { 
   // compare time with now and stored time in object
   if (now.getTime() < singleObj.date.getTime() ) {
     // assigning src to image when the condition satisfied
     banner.attr('src', imgDir+ singleObj.img +'.jpg');
     break; // stop the loop when match found
   }
});

read about getTime()

|improve this answer|||||
\$\endgroup\$
  • \$\begingroup\$ Looks like it should work however I did this and I'm always getting the '.img' from the last object (even though previous dates should have settled the if statement condition) , any ideas? \$\endgroup\$ – user1394450 May 14 '12 at 19:36
  • \$\begingroup\$ @user1394450 check my update answer. Loop should break when match found. I edited that. \$\endgroup\$ – The System Restart May 14 '12 at 19:44
  • \$\begingroup\$ This worked with 1 exception, I cant "break;" I need to "return false;" Thank you very much! \$\endgroup\$ – user1394450 May 14 '12 at 19:49

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service, privacy policy and cookie policy