如何让Show按钮兼具隐藏功能 实现图片显示/隐藏切换

你的代码其实已经通过classList.toggle('hidden')实现了元素显示和隐藏的切换逻辑，只需要补充按钮文本的动态切换，就能让用户清晰知道当前按钮的功能。以下是具体改造方案：

修改后的HTML代码 #

给按钮添加一个id，方便在JS中定位修改它的文本：

<button id="pyramidBtn" class="button" onclick="togglePyramid()">Show Pyramid</button>

修改后的JavaScript代码 #

修改函数名更贴合功能（可选，但语义更清晰），同时在切换元素状态后，根据当前状态更新按钮文本：

function togglePyramid() {
  // 获取所有目标元素并切换hidden类
  const elements = document.querySelectorAll('.triangle');
  elements.forEach(element => {
    element.classList.toggle('hidden');
  });

  // 获取按钮元素，切换文本
  const btn = document.getElementById('pyramidBtn');
  btn.textContent = btn.textContent === 'Show Pyramid' ? 'Hide Pyramid' : 'Show Pyramid';
}

补充说明 #

• 如果你的.triangle元素初始状态是隐藏（即默认带有hidden类），初始按钮文本保持Show Pyramid即可；如果初始是显示的，把按钮初始文本改成Hide Pyramid就行。
• classList.toggle()方法会自动判断元素是否包含指定类：有则移除，无则添加，完美适配显示/隐藏的切换需求。

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