为何Next/Prev按钮无法正确遵循数组索引切换iframe地图？

问题根源 #

你的代码存在三个核心问题导致切换逻辑异常：

1. 索引操作顺序错误：点击按钮时先使用当前索引值再执行自增/自减，导致第一次点击Next时仍加载初始索引[0]的内容，点击Prev时会取到数组负索引对应的值（即最后一个元素）。
2. 边界条件判断错误：Next按钮的禁用条件逻辑颠倒，Prev按钮的禁用条件未覆盖索引小于0的情况。
3. 未处理索引越界：没有限制索引范围，可能导致意外的数组访问行为。

修正后的代码 #

JavaScript 代码

const prevButton = document.querySelector('.prev');
const nextButton = document.querySelector('.next');
const mapsList = ['link 1', 'link 2', 'link 3'];
const iframe = document.getElementById('mapsframe');
let currentIndex = 0;

// 初始化加载第一个地图
iframe.src = mapsList[currentIndex];

prevButton.addEventListener('click', function() {
  // 先递减索引，再加载对应内容
  currentIndex--;
  iframe.src = mapsList[currentIndex];
  
  // 启用Next按钮
  nextButton.disabled = false;
  
  // 当索引为0时禁用Prev按钮
  if (currentIndex === 0) {
    prevButton.disabled = true;
  }
});

nextButton.addEventListener('click', function() {
  // 先递增索引，再加载对应内容
  currentIndex++;
  iframe.src = mapsList[currentIndex];
  
  // 启用Prev按钮
  prevButton.disabled = false;
  
  // 当索引到达最后一个元素时禁用Next按钮
  if (currentIndex === mapsList.length - 1) {
    nextButton.disabled = true;
  }
});

HTML 代码（修正多余的闭合标签）

<div class="maps-gallery">
  <iframe src="" id="mapsframe" name="mapsframe" width="750" height="400" style="border:0;" allowfullscreen="" loading="lazy" referrerpolicy="no-referrer-when-downgrade"></iframe>
</div>
<div class="buttons">
  <button disabled="" class="button prev">Prev</button>
  <button class="button next">Next</button>
</div>

关键修改点 #

• 调整索引操作顺序：先执行currentIndex++/currentIndex--，再设置iframe的src，确保加载的是目标索引的内容。
• 修正Next按钮的禁用条件：当currentIndex等于数组最后一个索引（mapsList.length - 1）时禁用，符合逻辑。
• 移除HTML中多余的</section>标签，避免结构错误。

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