如何实现当前周数与div的ID匹配时显示该div？

我来帮你梳理下代码里的问题，然后给出针对性的修复方案～

代码里的核心问题 #

• 变量被意外覆盖：你先把计算好的周数赋值给了s，但紧接着又用var s = document.getElementById(...)重新定义了这个变量，直接覆盖了之前的周数，导致你根本没用到正确的周数去定位目标div。
• 获取元素的ID错误：你用d.getDay()来作为ID参数，但d.getDay()返回的是星期几（0代表周日，6代表周六），不是你计算出来的年度周数，这自然找不到对应ID的div。
• 逻辑不符合需求：你的三元表达式是切换单个元素的显示/隐藏状态，但你的需求是只显示当前周对应的div，而不是切换同一个元素的状态。

修复后的完整代码 #

JavaScript部分 #

// 保留你的周数计算函数
Date.prototype.getWeekNumber = function(){ 
  var d = new Date(Date.UTC(this.getFullYear(), this.getMonth(), this.getDate())); 
  var dayNum = d.getUTCDay() || 7; 
  d.setUTCDate(d.getUTCDate() + 4 - dayNum); 
  var yearStart = new Date(Date.UTC(d.getUTCFullYear(),0,1)); 
  return Math.ceil((((d - yearStart) / 86400000) + 1)/7); 
};

// 获取当前周数，用独立变量避免被覆盖
var currentWeek = new Date().getWeekNumber();

// 根据周数获取目标div（转成字符串更严谨）
var targetWeekDiv = document.getElementById(currentWeek.toString());

// 确保找到元素后再修改显示状态
if (targetWeekDiv) {
  targetWeekDiv.style.display = 'block';
}

HTML示例（保持你的结构，ID对应周数即可） #

<div class="container" id="8" style="display:none">
  <div class="row">
    <div class="col">
      <h1>Week 8</h1>
      <p>Sample Text</p>
    </div>
    <div class="col">
      <img src="image.jpg" class="img-fluid">
    </div>
  </div>
</div>

<!-- 其他周的div按此格式创建，ID对应周数 -->
<div class="container" id="9" style="display:none">
  <div class="row">
    <div class="col">
      <h1>Week 9</h1>
      <p>Another Sample</p>
    </div>
    <div class="col">
      <img src="another-image.jpg" class="img-fluid">
    </div>
  </div>
</div>

进阶优化（可选） #

如果需要确保所有非当前周的div都保持隐藏（比如之前手动修改过显示状态的情况），可以先统一隐藏所有容器，再显示当前周的：

// 先隐藏所有.container元素
var allWeekContainers = document.querySelectorAll('.container');
allWeekContainers.forEach(container => {
  container.style.display = 'none';
});

// 再显示当前周的div
if (targetWeekDiv) {
  targetWeekDiv.style.display = 'block';
}

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