如何实现单张截图单独显隐，要求动态生成按钮且使用JS图片数组配置

我们可以按照要求分三步完成功能开发，全程不需要修改现有HTML的静态结构，所有动态内容由脚本生成：

1. 独立图片配置文件 #

新建单独的JS配置文件（例如命名为site-screenshot-config.js），存放所有截图的相关配置，后续新增/修改截图只需要调整这个文件即可：

var aSite = [
  {
    imgSrc: "https://picsum.photos/200",
    imgAlt: "screenshot",
    btnText: "ToggleA",
    dtLabel: "Site – Manage Sites - New:",
    description: "the Site definition Wizard appears, you answer a number of questions",
    width: 238,
    height: 222,
    targetId: "demoA"
  },
  {
    imgSrc: "https://picsum.photos/200",
    imgAlt: "screenshot",
    btnText: "ToggleB",
    dtLabel: "“What would you like to call the website?”",
    description: "enter George's site",
    width: 310,
    height: 307,
    targetId: "demoB"
  }
]

如果要求严格使用原始二维数组结构，也可以按索引对应字段即可，逻辑完全通用。

2. 主逻辑脚本 #

新建主JS文件（例如命名为toggle-control.js），负责动态生成DOM、绑定事件：

document.addEventListener('DOMContentLoaded', () => {
  const dlWrapper = document.querySelector('article dl')
  dlWrapper.innerHTML = ''

  // 遍历配置生成所有截图模块
  aSite.forEach(item => {
    // 生成标题节点
    const dt = document.createElement('dt')
    dt.innerText = item.dtLabel
    dlWrapper.appendChild(dt)

    // 生成内容节点
    const dd = document.createElement('dd')
    dd.innerHTML = `${item.description}<br><br>`

    // 生成单张控制按钮
    const singleToggleBtn = document.createElement('button')
    singleToggleBtn.innerText = item.btnText
    singleToggleBtn.addEventListener('click', () => {
      const targetImg = document.getElementById(item.targetId)
      targetImg.classList.toggle('toggle-class')
      // 可选：按钮文字跟随显隐状态切换
      singleToggleBtn.innerText = targetImg.classList.contains('toggle-class') 
        ? `Show ${item.btnText.replace('Toggle', '')}` 
        : item.btnText
    })
    dd.appendChild(singleToggleBtn)

    // 生成图片容器和图片
    const toggleDiv = document.createElement('div')
    toggleDiv.classList.add('toggle')
    const img = document.createElement('img')
    img.src = item.imgSrc
    img.alt = item.imgAlt
    img.width = item.width
    img.height = item.height
    img.id = item.targetId
    img.classList.add('screenshot')
    toggleDiv.appendChild(img)
    dd.appendChild(toggleDiv)

    dlWrapper.appendChild(dd)
  })

  // 全局全显全隐逻辑优化
  const globalToggleBtn = document.querySelector('#main-button')
  globalToggleBtn.addEventListener('click', () => {
    const allScreenshots = document.querySelectorAll('.screenshot')
    if (!allScreenshots.length) return

    const isAllHidden = allScreenshots[0].classList.contains('toggle-class')
    allScreenshots.forEach(img => {
      isAllHidden ? img.classList.remove('toggle-class') : img.classList.add('toggle-class')
    })
    globalToggleBtn.innerText = isAllHidden ? 'Hide all screens' : 'Show all screens'
  })
})

3. CSS优化 #

原有CSS可以删除冗余的hideA、hideB规则，同时修正选择器错误（原来的.article是类选择器，你的HTML用的是<article>标签，去掉前面的点即可）：

article {
  background-color: white;
  border: 1px groove silver;
  border-radius: 1em;
  margin-left: 230px;
  min-width: 700px;
  padding: 1em;
  width: auto;
}

img.screenshot {
  margin-bottom: 20px;
  margin-top: 20px;
}

div.toggle {
  margin: 10px 0 0 50px;
}

.toggle-class {
  display: none;
}

使用方式 #

在现有HTML的</body>标签之前引入两个JS文件即可：

<script src="site-screenshot-config.js"></script>
<script src="toggle-control.js"></script>

符合要求说明 #

• 所有控制按钮、截图节点都是脚本动态插入，HTML中没有静态写死对应代码
• 图片配置完全独立在单独的JS文件中，和业务逻辑完全分离
• 同时支持单张截图独立显隐、全局一键全显/全隐两种控制模式

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