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

我试图使我的页面内容取决于日期

我使用moment.js（）来确定日期，使用一些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");
};

---

单击左箭头或右箭头时，您正确设置了日期，但没有再次运行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();
});

---

单击左箭头或右箭头时，您正确设置了日期，但没有再次运行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();
});

---

我把你的代码做成了一个JSFIDLE。我还通过使用他们的“减法”（在他们的示例中）更改了删除1天的位置。像这样：

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

---

我把你的代码做成了一个JSFiddle。我还通过使用他们的“减法”（在他们的示例中）更改了删除1天的位置。像这样：

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

---

太棒了！这正是我需要的。它工作得很好。非常感谢你！如果您认为这是正确答案，那么将其标记为答案将是非常棒的！：）我试过了，但上面说因为我的代表低于15，我的投票被记录下来了，但没有公开显示出来。：/我想我能做的最好的事情就是当我排名足够高的时候再回来给你评分。很抱歉man@codymillennial我不知道那件事。谢谢你！令人惊叹的！这正是我需要的。它工作得很好。非常感谢你！如果您认为这是正确答案，那么将其标记为答案将是非常棒的！：）我试过了，但上面说因为我的代表低于15，我的投票被记录下来了，但没有公开显示出来。：/我想我能做的最好的事情就是当我排名足够高的时候再回来给你评分。很抱歉man@codymillennial我不知道那件事。谢谢你！