使元素无法按日期访问（用于出现日历）

Question

我最近一直在使用 vanilla JS 而没有 jquery 或使用网格（就像我在网上看到的所有示例一样）制作一个降临节日历。 我似乎无法根据日期打开门。我认为 js 代码或多或少是正确的，但我错过了实际上为每个 html 元素（门）提供了在 JS 文件中检查的日期的变量。 所以我的问题是，我错过了什么？在 html 中添加“day”类是否有效？ 我还没有找到一个只有香草 JS 的样本，所以我很迷茫。

我制作了一个非常简单的代码笔，其中包含四个不同日期的门元素。实际项目有 25 扇门，它们都随机放置在背景上。他们也没有使用警报，但为了显示某些内容，我已将其更改为警报！

如果内容草率或难以阅读，我深表歉意；我对此还是很陌生。

如果您需要任何澄清，请在 cmets 中告诉我！

谢谢！

代码笔： https://codepen.io/LovelyAndy/pen/MWebWKy

let d = new Date()
let todaysDate = d.getDate()
const chirstmas = new Date('2020-12-25')
const day = document.querySelectorAll('.day')
const doors = document.querySelectorAll('.door')
const doorBackArray = document.querySelectorAll('.door-back')

doors.forEach((door) => {
  if (todaysDate >= day) {
    door.addEventListener('click', () => {
      door.classList.add('doorOpen')
    })
  } else if (todaysDate < day) {
    door.addEventListener('click', function() {
      alert("Not so fast! Come back on the day for the surprise!");
    })
  } else {
    door.addEventListener('click', function() {
      alert("It's Christmas baby!");
    })
  }
})

.door-position {
  position: absolute;
}

.door-back {
  position: relative;
  height: 65px;
  width: 65px;
  background-image: url('https://preview.redd.it/npq2ab6aepd51.jpg?auto=webp&s=2d44bf582509451d41f9e8add54775e9fb4478fb');
  border-radius: 50px;
  background-size: cover;
}

.door {
  position: absolute;
  height: 65px;
  width: 65px;
  font-family: 'Mountains of Christmas', cursive;
  font-size: 1.5em;
  color: white;
  border: 2px solid teal;
  border-radius: 50px;
  background: indianred;
  cursor: pointer;
  transform-origin: left;
  transition: all 0.5s ease-in-out;
}

.doorOpen {
  transform: perspective(1200px) translateZ(0px) translateX(0px) translateY(0px) rotateY(-150deg);
}

.d1 {
  top: 100px;
  left: 60px;
}

.d10 {
  top: 100px;
  left: 400px;
}

.d20 {
  top: 100px;
  left: 600px;
}

.d25 {
  top: 100px;
  left: 800px;
}

<div class="calendar-main">
  <div class="door-position d1">
    <div class="door-back">
      <button class="door day">1</button>
    </div>
  </div>
  <div class="door-position d10">
    <div class="door-back">
      <button class="door day">10</button>
    </div>
  </div>
  <div class="door-position d20">
    <div class="door-back">
      <button class="door day">20</button>
    </div>
  </div>
  <div class="door-position d25">
    <div class="door-back">
      <button class="door day">25</button>
    </div>

  </div>

Answer 1

您可以使用 html data attributes 来指定每个元素的开放日期。 然后，您将使用标准元素选择器获取该日期，然后引用它的数据属性。

<div class="door-position d1" data-opening-date="12/25/2020">
    <div class="door-back">
      <button class="door day">1</button>
    </div>
  </div>

然后您可以从数据属性中获取点击日期：

const door = document.querySelector('.door-back');
if (door.openingDate == myDate) { do something }

你可以看到一个完整的实现here。