基于日期天数控制网格中图片显示与隐藏的JavaScript实现求助

我看了你代码里的问题啦，咱们一步步来修正，让它完全符合你的需求：

原代码里的核心问题 #

• 重复的ID：所有图片都用了id="image"，但HTML里ID必须是唯一的，getElementById只会找到第一个匹配的元素，后面的图片根本不会被处理。
• 语法错误：函数定义写错了，var function image()是非法语法，应该直接写function image()或者用箭头函数。
• 条件判断错误：用了=（赋值符号）而不是===（比较相等），逻辑完全走偏了。
• 逻辑不符合需求：你的代码只处理了单个图片的显示/隐藏，没有实现“每天显示新图+保留之前已显示的”以及日期>15时的规则。

修正后的完整代码 #

先调整HTML部分，给每个日期项加个标识，方便JS识别对应的日期：

<div class="grid-container">
  <div class="item" data-day="1"><div class="number">1.</div><img class="calendar-img" src="img/01.jpeg"></div>
  <div class="item" data-day="2"><div class="number">2.</div><img class="calendar-img" src="img/10.jpg"></div>
  <div class="item" data-day="3"><div class="number">3.</div><img class="calendar-img" src="img/10.jpg"></div>
  <div class="item" data-day="4"><div class="number">4.</div><img class="calendar-img" src="img/10.jpg"></div>
  <div class="item" data-day="5"><div class="number">5.</div><img class="calendar-img" src="img/10.jpg"></div>
  <div class="item" data-day="6"><div class="number">6.</div><img class="calendar-img" src="img/10.jpg"></div>
  <div class="item" data-day="7"><div class="number">7.</div><img class="calendar-img" src="img/10.jpg"></div>
  <div class="item" data-day="8"><div class="number">8.</div><img class="calendar-img" src="img/10.jpg"></div>
  <div class="item" data-day="9"><div class="number">9.</div><img class="calendar-img" src="img/10.jpg"></div>
  <div class="item" data-day="10"><div class="number">10.</div><img class="calendar-img" src="img/10.jpg"></div>
  <div class="item" data-day="11"><div class="number">11.</div><img class="calendar-img" src="img/10.jpg"></div>
  <div class="item" data-day="12"><div class="number">12.</div><img class="calendar-img"></div>
  <div class="item" data-day="13"><div class="number">13.</div><img class="calendar-img"></div>
  <div class="item" data-day="14"><div class="number">14.</div><img class="calendar-img"></div>
  <div class="item" data-day="15"><div class="number">15.</div><img class="calendar-img"></div>
  <div class="item" data-day="16"><div class="number">16.</div><img class="calendar-img"></div>
  <div class="item" data-day="17"><div class="number">17.</div><img class="calendar-img"></div>
  <div class="item" data-day="18"><div class="number">18.</div><img class="calendar-img"></div>
  <div class="item" data-day="19"><div class="number">19.</div><img class="calendar-img"></div>
  <div class="item" data-day="20"><div class="number">20.</div><img class="calendar-img"></div>
  <div class="item" data-day="21"><div class="number">21.</div><img class="calendar-img"></div>
  <div class="item" data-day="22"><div class="number">22.</div><img class="calendar-img"></div>
  <div class="item" data-day="23"><div class="number">23.</div><img class="calendar-img"></div>
  <div class="item" data-day="24"><div class="number">24.</div><img class="calendar-img"></div>
  <div class="item" data-day="25"><div class="number">25.</div><img class="calendar-img"></div>
  <div class="item" data-day="26"><div class="number">26.</div><img class="calendar-img"></div>
  <div class="item" data-day="27"><div class="number">27.</div><img class="calendar-img"></div>
  <div class="item" data-day="28"><div class="number">28.</div><img class="calendar-img"></div>
  <div class="item" data-day="29"><div class="number">29.</div><img class="calendar-img"></div>
  <div class="item" data-day="30"><div class="number">30.</div><img class="calendar-img"></div>
</div>

<script>
// 获取今天的日期
const todayDate = new Date().getDate();
// 获取所有日期项
const items = document.querySelectorAll('.item');

// 遍历每个日期项，判断图片的显示/隐藏
items.forEach(item => {
  // 把data-day的字符串转成数字
  const day = parseInt(item.dataset.day);
  // 获取当前项里的图片元素
  const img = item.querySelector('.calendar-img');
  
  if (todayDate > 15) {
    // 日期大于15时，所有图片都隐藏
    img.style.display = 'none';
  } else {
    // 日期小于等于15时，显示<=今天日期的图片，隐藏之后的
    img.style.display = day <= todayDate ? 'block' : 'none';
  }
});
</script>

代码解释 #

1. HTML部分：给每个.item加了data-day属性，用来标记对应的日期，不用给每个图片加唯一ID，更简洁灵活。
2. JavaScript部分：
   • 先获取今天的日期todayDate。
   • 用querySelectorAll拿到所有日期项，逐个遍历处理。
   • 提取data-day的数值并转成整数，和今天的日期做对比。
   • 按照你的需求执行逻辑：
     • 如果今天日期>15，所有图片都隐藏。
     • 如果今天日期<=15，只显示日期小于等于今天的图片——比如今天是5号，1-5号的图片显示，6-15号的隐藏；到15号时，1-15号的图片全部显示，完美实现“每天显示一张新图，保留之前所有已显示的”效果。
3. 去掉了重复的ID，彻底解决了getElementById只能选第一个元素的问题。

额外小建议 #

可以给图片加个默认隐藏的CSS样式，避免页面加载时先闪现所有图片再被JS隐藏，体验更好：

.calendar-img {
  display: none;
}

内容的提问来源于stack exchange，提问作者mara