jquery - Using a for in loop within a for in loop with a calendar -

jquery - Using a for in loop within a for in loop with a calendar -

i trying create clean way create advent calendar. logic this:

using moment.js compare times, if todays date equal date in json array add together class giving greenish "door" allow click on , slide effect reveal underneath blurred greenish door. if not add together class makes reddish "door" , if clicked, prompt message saying check tomorrow.

i have working if code out each day separately. ugly , not efficient. perhaps way? guidance appreciated.

here fiddle

html:

<div class="week clearfix"> <div class="day " id="day1"> <div class="header">day 1</div> <div class="door" id="door1"></div> <div class="blur" id="blur1">so maybe start jete-ing, , stop je-terrorizing me!</div> <div class="content" id="content1">so maybe start jete-ing, , stop je-terrorizing me!</div> </div> <div class="day " id="day2"> <div class="header">day 2</div> <div class="door" id="door2"></div> <div class="blur" id="blur2">it feels in queen! it's sunday, screw — juice box time. , stone steady. no more dizzies. , here coming out of mother's 3rd base! can't guy phone call mother pretty without seeming strange? amen. , how little piece of tail on her? cute!</div> <div class="content" id="content2">it feels in queen! it's sunday, screw — juice box time. , stone steady. no more dizzies. , here coming out of mother's 3rd base! can't guy phone call mother pretty without seeming strange? amen. , how little piece of tail on her? cute!</div> </div> <div class="day " id="day3"> <div class="header">day 3</div> <div class="door" id="door3"></div> <div class="blur" id="blur3"> <img src="http://kyleledbetter.com/silo-3/assets/images/avatars/george-michael_128.jpg"> </div> <div class="content" id="content3"> <img src="http://kyleledbetter.com/silo-3/assets/images/avatars/george-michael_128.jpg"> </div> </div> <div class="day " id="day4"> <div class="header">day 4</div> <div class="door" id="door4"></div> <div class="blur" id="blur4">and wouldn't lie there, if that's you're thinking. that's not thinking. @ us, crying couple of girls on lastly day of camp. dramatic , flamboyant. makes me want set myself on fire. did ted create appointment?</div> <div class="content" id="content4">and wouldn't lie there, if that's you're thinking. that's not thinking. @ us, crying couple of girls on lastly day of camp. dramatic , flamboyant. makes me want set myself on fire. did ted create appointment?</div> </div> <div class="day " id="day5"> <div class="header">day 5</div> <div class="door" id="door5"></div> <div class="blur" id="blur5">i getting rid of thing. has caused me nil pride , self-respect. stop licking hand, horse's ass. he… she… what's difference? oh hear, hear. in dark, looks same. early. butterscotch! want lick? there's unlimited juice? party gonna off hook.</div> <div class="content" id="content5">i getting rid of thing. has caused me nil pride , self-respect. stop licking hand, horse's ass. he… she… what's difference? oh hear, hear. in dark, looks same. early. butterscotch! want lick? there's unlimited juice? party gonna off hook.</div> </div> <div class="day " id="day6"> <div class="header">day 6</div> <div class="door" id="door6"></div> <div class="blur" id="blur6">even means me taking chubby… suck up. oh, yeah, guy in the $4,000 suit holding lift guy doesn't create in 3 months. come on! though sooooo many people in office begging it.</div> <div class="content" id="content6">even means me taking chubby… suck up. oh, yeah, guy in the $4,000 suit holding lift guy doesn't create in 3 months. come on! though sooooo many people in office begging it.</div> </div> <div class="day " id="day7"> <div class="header">day 7</div> <div class="door" id="door7"></div> <div class="blur" id="blur7">in mid '90s, tobias formed folk music band lindsay , maebe called dr. funke's 100 percent natural time family band solution.</div> <div class="content" id="content7">in mid '90s, tobias formed folk music band lindsay , maebe called dr. funke's 100 percent natural time family band solution.</div> </div>

js:

$(function () { var n; var days; var today = moment(); var days = { "day1": moment([2014, 5, 22]), "day2": moment([2014, 5, 23]), "day3": moment([2014, 5, 24]), "day4": moment([2014, 5, 25]), "day5": moment([2014, 5, 26]), "day6": moment([2014, 5, 27]), "day7": moment([2014, 5, 28]) }; var numbers = { 1: 1, 2: 2, 3: 3, 4: 4, 5: 5, 6: 6, 7: 7 }; (d in days) { console.log(d); (n in numbers) { var dn = days[d].diff(today, 'days'); if (dn <= 0) { console.log("#door" + [n]); $("#door" + [n]).addclass("avb"); $("#day" + [n]).click(function () { $("#door" + [n], "#blur" + [n]).slideup("slow", function () { $("#content" + [n]).fadein("slow"); }); }); } else { $("#door" + [n]).addclass("notavb"); $("#day" + [n]).click(function () { $("#shadowbg").fadein("slow", function () {}); }); }; }; }; });

i think best bet create reusable jquery plugin can used turn combination of 7 divs content such calendar. using momentjs powerful features can create dynamic , locale-aware. i have created jsfiddle illustration utilize starting point: http://jsfiddle.net/dkk6h/13/

jquery json momentjs