Question

我正在尝试创建一种干净的方式来创建一个降临节日历。逻辑是：

使用moment.js来比较时间，如果今天的日期等于json数组中的日期，那么添加一个类，给它一个绿色的“门”，这将允许你点击它，然后一个幻灯片效果来揭示什么在模糊的绿色门下面。如果没有添加一个使其成为红色“门”的类，如果单击该类，则会提示明天再回来查看。

如果我每天分别编码，我就会工作。但这很丑陋而且效率不高。但也许这是我的唯一方法？非常感谢任何指导。

这是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 you could start jete-ing, and stop je-terrorizing me!</div>
    <div class="content" id="content1">So maybe you could start jete-ing, and 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 good to be back in a queen! It's Sunday, but screw it — juice box time. And I am rock steady. No more dizzies. And here you are coming out of your mother's third base! Can't a guy call his mother pretty without it seeming strange? Amen. And how about that little piece of tail on her? Cute!</div>
    <div class="content" id="content2">It feels good to be back in a queen! It's Sunday, but screw it — juice box time. And I am rock steady. No more dizzies. And here you are coming out of your mother's third base! Can't a guy call his mother pretty without it seeming strange? Amen. And how about that 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 I wouldn't just lie there, if that's what you're thinking. that's not what I WAS thinking. Look at us, crying like a couple of girls on the last day of camp. Everything they do is so dramatic and flamboyant. It just makes me want to set myself on fire. Did Ted make an appointment?</div>
    <div class="content" id="content4">And I wouldn't just lie there, if that's what you're thinking. that's not what I WAS thinking. Look at us, crying like a couple of girls on the last day of camp. Everything they do is so dramatic and flamboyant. It just makes me want to set myself on fire. Did Ted make an 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 am getting rid of this thing. It has caused me nothing but pride and self-respect. Stop licking my hand, you horse's ass. He… she… what's the difference? Oh hear, hear. In the dark, it all looks the same. Early. Butterscotch! Want a lick? there's unlimited juice? this party is gonna be off the hook.</div>
    <div class="content" id="content5">I am getting rid of this thing. It has caused me nothing but pride and self-respect. Stop licking my hand, you horse's ass. He… she… what's the difference? Oh hear, hear. In the dark, it all looks the same. Early. Butterscotch! Want a lick? there's unlimited juice? this party is gonna be off the 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 it means me taking a chubby… I will suck it up. Oh, yeah, the guy in the the $4,000 suit is holding the elevator for a guy who doesn't make that in three months. Come on! Even though sooooo many people in this office are begging for it.</div>
    <div class="content" id="content6">Even it means me taking a chubby… I will suck it up. Oh, yeah, the guy in the the $4,000 suit is holding the elevator for a guy who doesn't make that in three months. Come on! Even though sooooo many people in this office are begging for 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 the mid '90s, Tobias formed a folk music band with Lindsay and Maebe which he called Dr. Funke's 100 Percent Natural Good Time Family Band Solution.</div>
    <div class="content" id="content7">In the mid '90s, Tobias formed a folk music band with Lindsay and Maebe which he called Dr. Funke's 100 Percent Natural Good 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
};

for (d in days) {
    console.log(d);

    for (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 () {});
            });
        };
    };
};
});

Answer 1

我认为最好的办法是创建一个可重复使用的jquery插件，可以将7个DIV与内容的任意组合转换为这样的日历。通过使用momentjs强大的功能，您可以使其具有动态和区域设置感知功能。 I have created a JSFiddle example that you could use as a starting point: http://jsfiddle.net/dKk6H/13/

在for循环中使用for循环与日历

1 个答案: