求助：实现View All按钮恢复两类已隐藏图片（不使用jQuery）

嘿，别慌！作为前端新手遇到这种小卡点太正常了，我来帮你搞定这个View All按钮的功能，纯原生JS就能实现，完全不用jQuery～

核心实现思路 #

不管你之前是用添加CSS隐藏类还是直接修改元素style来隐藏图片，View All按钮的核心逻辑都是：选中所有目标图片元素，然后把它们的显示状态重置为默认。下面给你两种对应场景的具体实现：

方案一：用CSS类控制显示/隐藏（推荐） #

如果你的隐藏逻辑是给图片添加一个.hidden类（比如定义.hidden { display: none; }），那恢复显示只需要移除这个类就行，代码简洁还易维护：

// 第一步：获取View All按钮（假设按钮id为view-all）
const viewAllBtn = document.getElementById('view-all');

// 第二步：给按钮绑定点击事件
viewAllBtn.addEventListener('click', () => {
  // 第三步：选中所有需要恢复的design和developer类图片
  const targetImages = document.querySelectorAll('.design, .developer');
  
  // 第四步：遍历元素，移除隐藏类
  targetImages.forEach(img => {
    img.classList.remove('hidden');
  });
});

方案二：直接修改元素style（适配原有逻辑） #

如果你的隐藏按钮是直接设置img.style.display = 'none'来隐藏图片，那恢复时把display改回原来的布局样式即可（比如block、inline-block，根据你的实际布局调整）：

const viewAllBtn = document.getElementById('view-all');

viewAllBtn.addEventListener('click', () => {
  const targetImages = document.querySelectorAll('.design, .developer');
  
  targetImages.forEach(img => {
    // 重置为你原本的显示样式，或者用空字符串让浏览器使用默认值
    img.style.display = 'block';
    // 也可以写成 img.style.display = '';
  });
});

建设性小建议（帮你写更规范的代码） #

• 统一隐藏逻辑：尽量用CSS类（比如.hidden）控制显示/隐藏，而不是直接修改style。这样样式和逻辑分离，后期改样式或扩展功能会更省心。
• 给图片加统一标识：可以给所有图片加一个共同的类，比如.gallery-image，这样获取元素时只需写document.querySelectorAll('.gallery-image')，不用每次拼接两个类名，代码更简洁。
• 避免重复操作：可以加个小判断，先检查元素是否已经处于显示状态，再执行恢复操作——不过新手阶段先实现功能为主，这个优化可以留到后期。
• 测试边界场景：比如点击View All时，部分图片本来就是显示的、部分是隐藏的，要确保所有图片都能正确恢复；也可以多次切换隐藏/显示按钮，验证逻辑是否稳定。

内容的提问来源于stack exchange，提问作者G. Kitshoff