javascript - 如何通过更改日期来更新 div 的内部 HTML？

Question

我正在尝试使页面内容取决于日期。

我使用 moment.js ( http://momentjs.com/ ) 来确定日期，并使用一些 JS 来更改页面顶部显示的日期。对于页面的其余内容，我希望它取决于页面顶部显示的日期。

当用户单击向左和向右箭头时，我已经能够将页面内容更新到当前日期，但不能更新到 future 或过去的日期。我愿意采用不同的方式使页面的内容依赖于日期，但这就是我到目前为止所拥有的:

var displayDate = moment();

$('#date').text(displayDate.format('MMMM Do'));

$(".left-arrow").click(function(){
    $('#date').text(displayDate.add(-1, 'days').format('MMMM Do'));
});

$(".right-arrow").click(function(){
    $('#date').text(displayDate.add(1, 'days').format('MMMM Do'));
});

if ($('#date').text() == "April 8th"){
    $('#box1').text("Read chapters 1-3");
    $('#box2').text("Read chapters 1-3");
    $('#box3').text("Read chapters 1-3");  
};

if ($('#date').text() == "April 9th"){
    $('#box1').text("Read chapters 4-6");
    $('#box2').text("Read chapters 4-6");
    $('#box3').text("Read chapters 4-6");
};

Answer 1

当单击向左或向右箭头时，您正在正确设置日期，但不会再次运行 if 语句来检查新日期是什么。您可以将 if 语句包装在一个函数中，然后在按下箭头时调用该函数。例如:

function checkDate() {
    if ($('#date').text() == "April 8th"){
        $('#box1').text("Read chapters 1-3");
        $('#box2').text("Read chapters 1-3");
        $('#box3').text("Read chapters 1-3");  
    };

   if ($('#date').text() == "April 9th"){
       $('#box1').text("Read chapters 4-6");
       $('#box2').text("Read chapters 4-6");
       $('#box3').text("Read chapters 4-6");
    };
}

然后，当您单击向左或向右箭头时，只需运行 checkDate 函数。

$(".left-arrow").click(function(){
    $('#date').text(displayDate.add(-1, 'days').format('MMMM Do'));
    checkDate();
});

$(".right-arrow").click(function(){
    $('#date').text(displayDate.add(1, 'days').format('MMMM Do'));
    checkDate();
});