使用JavaScript为页面图片动态添加显示隐藏切换按钮的实现问题

完整实现代码 #

HTML代码 #

<h2>Create a new site</h2>
<p>Site – Manage Sites - New:</p>
<dd>
  <img class="screenshot" width="238" height="222" src="https://picsum.photos/200" alt="screenshot" />
</dd>
<p>“What would you like to call the website?”</p>
<dd>
  <img class="screenshot" width="238" height="222" src="https://picsum.photos/300" alt="screenshot" />
</dd>

CSS代码 #

img.screenshot {
  margin-bottom: 20px;
  margin-top: 20px;
}
.btn-styled {
  font-size: 14px;
  margin: 10px;
  padding: 0 5px;
  line-height: 2;
}

JavaScript代码 #

// 调用querySelectorAll获取所有截图元素
const eScreens = document.querySelectorAll('img.screenshot');
// for循环遍历所有截图
for (let i = 0; i < eScreens.length; i++) {
  // 调用createElement创建按钮元素
  const button = document.createElement("button");
  button.innerHTML = "隐藏图片";
  button.className = "btn-styled";
  button.style.background = "orange";
  
  // 调用addEventListener绑定点击事件
  button.addEventListener("click", function() {
    const currentImg = eScreens[i];
    // 切换图片显示状态
    if (currentImg.style.display === 'none') {
      currentImg.style.display = 'inline-block';
      this.innerHTML = '隐藏图片';
    } else {
      currentImg.style.display = 'none';
      this.innerHTML = '显示图片';
    }
  });
  
  // 获取当前图片对应的dd容器，调用appendChild插入按钮
  const currentDd = document.getElementsByTagName("dd")[i];
  currentDd.appendChild(button);
}

原代码问题说明 #

• 循环条件错误：i <= eScreens.length 会多执行一次循环引发下标越界，需修改为i < eScreens.length
• 按钮插入位置错误：固定取getElementsByTagName("dd")[0]会导致所有按钮都插入到第一个dd容器，需要匹配当前图片对应的dd下标
• 按钮ID重复：多个按钮使用同一个myButtonID不符合ID唯一的规范
• 变量作用域问题：用var声明循环变量i，会导致点击事件触发时i已为最终值，无法匹配对应图片，改用let声明即可解决块级作用域问题
• 缺少显隐切换逻辑：原事件监听函数为空，未实现图片状态切换和按钮文字切换逻辑

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