如何设置按钮切换JavaScript数组渲染内容的显示/隐藏状态

现有代码核心问题 #

• 页面加载阶段直接用document.write输出数组内容，渲染时机不可控，且加载完成后调用该方法会覆盖整个页面文档，无法支持显隐切换
• 现有unshow()函数仅实现了固定id元素的隐藏逻辑，没有覆盖列表渲染、状态切换、操作完成提示的需求
• 没有做渲染状态标记，重复点击会重复插入列表内容

具体实现代码 #

HTML部分调整 #

预留专门的列表挂载容器，删掉原有直接输出内容的document.write相关逻辑，按钮的onclick事件绑定切换函数（也可以直接沿用unshow命名，保持和原有绑定一致即可）：

<!-- 原有段落和按钮保留，确认onclick绑定的函数名和后续JS函数名一致 -->
<p>
  段落文本内容
  <button onclick="toggleNameList()">切换去重名单显示</button>
</p>
<!-- 名单容器默认隐藏，用来放渲染后的无序列表 -->
<div id="nameListWrap" style="display: none;"></div>

JS逻辑改写 #

// 原有两个数组定义保留
const array1 = ['名单1', '名单2', '名单3'];
const array2 = ['名单2', '名单4', '名单3'];
// 合并去重逻辑保留
const uniqueNameList = [...new Set([...array1, ...array2])];

// 渲染状态标记，避免重复插入DOM
let isListRendered = false;
const listContainer = document.getElementById('nameListWrap');

function toggleNameList() {
  // 首次点击时才渲染列表
  if (!isListRendered) {
    // 构建无序列表
    const ul = document.createElement('ul');
    uniqueNameList.forEach(item => {
      const li = document.createElement('li');
      li.textContent = item;
      ul.appendChild(li);
    });
    listContainer.appendChild(ul);
    isListRendered = true;
    // 渲染完成提示
    alert('去重名单加载完成');
  }

  // 切换容器显隐状态
  const currentHideState = listContainer.style.display === 'none';
  listContainer.style.display = currentHideState ? 'block' : 'none';

  // 如果需要同步切换id为image的元素显隐，加下面这行即可
  // document.getElementById('image').style.display = currentHideState ? 'block' : 'none';
}

适配说明 #

• 原有编写的段落、按钮CSS样式无需修改，只要对应元素的id、类名保持和原来一致即可正常生效
• 如果需要给无序列表加自定义样式，直接给ul、li标签写对应CSS规则即可
• 如果不想用alert做提示，可以换成页面内的toast提示，逻辑位置和alert调用位置一致

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