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

Question

我正在尝试使我的页面内容依赖于日期。

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

我已经能够让页面内容更新到当前日期，而不是用户单击左箭头和右箭头时的未来或过去日期。我可以使用一种不同的方法来使页面的内容依赖于日期，但到目前为止我做到了以下几点：

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

Answer 2

我拿了你的代码做了一个JSFiddle。我还通过使用他们的"subtract“(在他们的示例中)更改了删除1天的位置。如下所示：

$('#date').text(displayDate.subtract(1, 'days').format('MMMM Do'));

https://jsfiddle.net/w0b6367k/