javascript - 如何使用查询选择器？

Question

所以我得到了这个代码:

Function9() {
            x = document.getElementById('BakjeRood');
            x.style.opacity=1;
            y = document.querySelectorAll("#BakjeBlauw, #BakjeGeel, #BakjePaars, #BakjeRoze, #BakjeWit");
            y.style. opacity = 0;
        }

如果您使用 function9() 单击按钮，图像“BakjeRood”的不透明度将为 1，但其他图像(BakjeBlauw 等)的不透明度应为 0(此结构对于我的所有函数都是相同的)我的网站上有。如何让第二部分发挥作用？

Answer 1

在您的示例中，您已经说明了 getElementById 的知识，它本质上返回单个 HTMLElement 实例或派生类，而 querySelectorAll返回一个可枚举的列表/类似数组的对象，其中包含与查询匹配的所有 HTMLElement 实例。

var elems = document.querySelectorAll("#x, #z, #z");
for(var index = 0; index < elems.length; index++) {
    elems[index].style.opacity = 0;
    elems[index].canDoOtherStuffToo();
}