Finding image by date

Question

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" />

• acconrad: 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.
• mu is too short: @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.
• j08691: @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.

Answer 1

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()

• user1394450: 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?
• The System Restart: @user1394450 check my update answer. Loop should break when match found. I edited that.
• user1394450: This worked with 1 exception, I cant "break;" I need to "return false;" Thank you very much!