如何使用addClass仅为ID为2、3的元素添加hidden类？

嘿，别担心，这绝对是初学者刚接触DOM操作时常会遇到的问题，完全不用不好意思😉

你遇到的核心问题是：当前的this.block选中了所有4个元素，所以调用addClass("hidden")时会给集合里的每一个元素都加上类。要解决这个问题，我们需要精准定位到ID为2和3的元素，再给它们添加类。下面分两种常见场景给你解决方案：

如果你用的是jQuery（因为你用到了addClass方法，大概率是） #

方案1：直接精准选择目标元素 #

直接通过ID选择器同时选中ID为2和3的元素，然后添加类：

$("#2, #3").addClass("hidden");

这里的$("#2, #3")是jQuery的多选择器语法，逗号分隔表示“选中ID为2的元素 和 ID为3的元素”。

方案2：从已有的元素集合中筛选 #

如果你必须基于this.block这个已有的元素集合来操作（比如它是之前获取的包含所有4个元素的集合），可以用filter()方法筛选出目标元素：

this.block.filter("#2, #3").addClass("hidden");

filter()会从this.block的元素集合里，只保留符合#2, #3选择器的元素，再给这些元素添加类。

如果你用的是原生JavaScript #

如果是原生JS操作DOM，我们可以这样做：

方案1：逐个选中并添加类 #

// 获取ID为2的元素
const elem2 = document.getElementById("2");
// 获取ID为3的元素
const elem3 = document.getElementById("3");

// 给它们添加hidden类
elem2.classList.add("hidden");
elem3.classList.add("hidden");

document.getElementById()是原生JS里获取单个元素最高效的方法，classList.add()则是专门用来给元素添加CSS类的API。

方案2：批量选中并遍历添加 #

如果之后可能需要选中更多元素，用querySelectorAll()批量选择后遍历添加会更方便：

// 选中所有符合条件的元素
const targetElems = document.querySelectorAll("#2, #3");

// 遍历每个元素，添加hidden类
targetElems.forEach(elem => {
  elem.classList.add("hidden");
});

简单总结一下：核心就是缩小选择范围，只让我们需要的元素被选中，再执行添加类的操作。慢慢来，选择器是DOM操作里最基础也最关键的知识点，多试几次就熟练啦！

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