使用 javascript 更改内容

Question

我是 JavaScript 新手，所以我可能不了解 JavaScript 的所有细节和特性。 对不起。

目前正在创建一个降临节日历。

 Calendar = function() {}; Calendar.prototype._showContent = function(day) { // The content box for the clicked day. var content = contents[this.currentDayIdx], title = content.querySelector('.content__title'), description = content.querySelector('.content__description'), meta = content.querySelector('.content__meta'); console.log('current day: ' + this.currentDayIdx + ' day number:' + day.number); /* if user selects day 1, current day is 0 and day number is 1*/ var d = new Date(); var todaysDate = d.getDate(); if (todaysDate == day.number) { console.log('today'); content.classList.add('content__block--today'); } if (todaysDate < day.number) { console.log('future'); content.classList.add('content__block--future'); } if (todaysDate >= day.number) { console.log('past'); content.classList.add('content__block--past'); } content.classList.add('content__block--current'); day.titlefx.hide(); day.titlefx.show(day.titlefxSettings); contentNumber.innerHTML = this.currentDayIdx + 1; };

 .content__block { padding: 10vh 5vw; } .js .content__block { padding: 20vh 5vw; position: absolute; z-index: 100; display: -webkit-flex; display: -ms-flexbox; display: flex; -webkit-flex-direction: column; -ms-flex-direction: column; flex-direction: column; -webkit-justify-content: center; -ms-flex-pack: center; justify-content: center; width: 85%; height: 100%; padding: 3em 0 6em 7vw; -webkit-user-select: none; -moz-user-select: none; -ms-user-select: none; user-select: none; -webkit-touch-callout: none; -khtml-user-select: none; } .content__title { font-family: 'Avenir Next', Avenir, 'Helvetica Neue', Helvetica, 'Segoe UI', Arial, sans-serif; font-size: 7vw; line-height: 0.85; margin: 0; } .content__description { font-size: 2.25vw; margin: 1em 0; padding: 0 0 0 5vw; } .content__meta { font-family: 'Avenir Next', Avenir, 'Helvetica Neue', Helvetica, 'Segoe UI', Arial, sans-serif; margin: 0; padding: 0 0 0 2vw; } .content__meta::before { content: '\\2014'; } .content__number { position: absolute; } .btn-back { font-size: 2em; line-height: 2; position: absolute; z-index: 100; right: 0; bottom: 0; width: 2em; margin: 0; margin: 1em; padding: 0; pointer-events: auto; color: currentColor; border: 0; border: 2px solid; background: none; } .btn-back:focus { outline: none; } .no-js .content__number, .no-js .btn-back { display: none; } .js .content__block, .js .content__description, .js .content__meta, .js .content__number, .js .btn-back { opacity: 0; } .js .content__block--current { pointer-events: auto; opacity: 1; } /* TODO: Change content */ .js .content__block--today {} .js .content__block--past {} .js .content__block--future {}

 <div class="content" id="my calendar"> <div class="content__block"> <h3 class="content__title">Day 1</h3> <p class="content__description">Description of Day 1 Event</p> <p class="content__meta"><a href="#">Click Here</a> </p> </div> <div class="content__block"> <h3 class="content__title">Day 2</h3> <p class="content__description">Description of Day 2 Event</p> <p class="content__meta"><a href="#">Click Here</a> </p> </div> <div class="content__block"> <h3 class="content__title">Day 3</h3> <p class="content__description">Description of Day 3 Event</p> <p class="content__meta"><a href="#">Click Here</a> </p> </div> <!-- (This goes on until day 31) --> </div>

显示每天预览的结构（当用户悬停某一天时，天 + 标题 + 副标题等）。 每天内容的结构是标题+描述+元（事件链接）

有一个日历显示 12 月的所有 31 天，一旦您单击它们，就会打开一个内容页面，其中包含标题 + 描述和元数据。 我在 HTML 中添加了这些信息。 但是我想要，如果用户选择未来的一天，我想更改描述并写一些类似“对不起！你不能早点看”的内容。 我也确认了， content.classList.add('content__block--future'); 它激活content__block--future CSS。 它完美无缺。 例如，如果我在 CSS 中将背景更改为红色，它就会改变。 但我无法更改“描述”的文本。

我尝试编写innerHTML但失败了。 该网站根本没有加载。 该代码现在工作正常，但缺少未来日期功能。

你能帮我解决这个问题吗？ 非常感谢！

Answer 1

Calendar.prototype._showContent = function(day) {
 
    // The content box for the clicked day.
        var content = contents[this.currentDayIdx],
        title = content.querySelector('.content__title'),
        description = content.querySelector('.content__description'),
        meta = content.querySelector('.content__meta');

     var d = new Date();
     var todaysDate = d.getDate();
  
      
       }
       if (todaysDate < day.number) {
           console.log('future');
           content.classList.add('content__block--future');
           
           description.innerHTML='Sorry.You can\'t look early! ';
           meta.innerHTML='';
         
        
       }}

做到了。 我想我之前在语法上失败了。 谢谢你。