current community

your communities

more stack exchange communities

company blog
Stack Exchange Inbox Reputation and Badges
tour help
Sign up ×
Code Review Stack Exchange is a question and answer site for peer programmer code reviews. It's 100% free, no registration required.
up vote 0 down vote favorite

Okay so I have 12 games that I need to sort through that each have a date and img string. I'm fairly new at 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" />
share|improve this question

migrated from stackoverflow.com May 14 '12 at 20:19

This question came from our site for professional and enthusiast programmers.
    
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. – acconrad May 14 '12 at 19:07
    
@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. – mu is too short May 14 '12 at 19:36
    
@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. – j08691 May 14 '12 at 19:38

1 Answer 1

up vote 1 down vote accepted

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

share|improve this answer
    
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? – user1394450 May 14 '12 at 19:36
    
@user1394450 check my update answer. Loop should break when match found. I edited that. – The System Restart May 14 '12 at 19:44
    
This worked with 1 exception, I cant "break;" I need to "return false;" Thank you very much! – user1394450 May 14 '12 at 19:49

Your Answer

 
discard

By posting your answer, you agree to the privacy policy and terms of service.