使用javascript更改多个图像的样式（不透明度）

我正在尝试获取多个元素，这些元素被组织在3个数组中“顶部”、“底部”、“鞋子”

我知道我可以使用

document.getElementsByClassName("class1 class2");

如何更改这些对象的样式，我当前的代码是：（我已经尝试了可见性和不透明度，但是它一直得到一个未捕获的类型错误，因为document.getelements…没有返回任何内容

function filter() {
var this_id = event.target.id;
console.log(this_id);
if (this_id = "filtertops") {
    document.getElementsByClassName("a4 a7 a11 a12 a8").style.visibility="hidden"; //not tops
    document.getElementsByClassName("a1 a2 a3 a5 a9 a10 a14").style.visbility="visible"; // tops
    }
else if (this_id = "filterbottoms") {
    document.getElementsByClassName("a2 a3 a5 a10 a14 a8").style.opacity="0.4"; //not bottoms
    document.getElementsByClassName("a1 a4 a7 a9 a11 a12").style.opacity="1"; //bottoms
    }
else if (this_id = "filtershoes") {
    document.getElementsByClassName("a1 a2 a3 a4 a5 a7 a9 a10 a11 a12 14").style.opacity="0.4"; //not shoes
    document.getElementsByClassName("a8").style.opacity="1"; //shoes
    }

我还尝试将它们分配给一个变量，然后再分配一个for循环来更改每个对象的样式，但这也不起作用

function filterbottoms() {
    var nonbottom = document.getElementsByClassName("a2 a3 a5 a10 a14 a8");
    var bottoms = document.getElementsByClassName("a1 a4 a7 a9 a11 a12");
    for (i in bottoms)
        {
            i.style.visibility='visible';
        }
    for (i in nonbottom)
        {
            i.style.visibility='hidden';
        } 

}

---

您的

for

循环非常接近：

for (i in bottoms){
    bottoms[i].style.visibility='visible';
}

应该

但不会

工作。在每次迭代中

i

是下一个键，而不是下一个值

但是您应该使用常规的

来表示

，而不是

来表示

中的

for (var i = 0; i < bottoms.length; i++){
    bottoms[i].style.visibility='visible';
}

for（变量i=0；i

---

编辑：我建议使用常规的

for

循环，因为在

中使用
for..in通常不适合数组或类似数组的对象（取决于特定对象）它将迭代非数值属性。Joseph的评论证实，在这种情况下，
中的
for..肯定不会因此而起作用。
您接近
for
循环：

for (i in bottoms){
    bottoms[i].style.visibility='visible';
}

应该
但不会
工作。在每次迭代中
i
是下一个键，而不是下一个值

但是您应该使用常规的
来表示
，而不是
来表示
中的

for (var i = 0; i < bottoms.length; i++){
    bottoms[i].style.visibility='visible';
}

for（变量i=0；i

编辑：我建议使用常规的
for
循环，因为在
中使用
for..in通常不适合数组或类似数组的对象（取决于特定对象）它将迭代非数值属性。Joseph的评论确认，在这种情况下，
中的“
for..in”肯定会因此而不起作用。
实际上，第一个不会起作用，因为“for…”in语法。当循环遍历nodeList对象时，它们有一个长度属性，然后抱怨没有样式属性。您提供的第二个应该可以工作。谢谢Joseph-答案更新了一点。（显然，我推荐了一个传统的for循环，其原理是这种事情可能会发生，但我没有费心检查它是否一定会对节点列表造成问题。）
document.getElementsByClassName（“class1 class2”）；
返回
[]
。你知道这是为什么吗？大概是因为你的文档没有包含这两个类的元素，所以没有返回任何元素。它不返回class1、Class2或class3等中的所有元素吗？因为我检查了图像，它们确实包含相关类。实际上，第一个类不起作用，因为语法中的for…。当循环遍历nodeList对象时，它们有一个length属性，然后抱怨没有样式属性。您提供的第二个属性应该可以工作。谢谢Joseph-答案更新了一点。（很明显，我推荐了一个传统的for循环，其原理是这样的事情可能会发生，但我没有费心去检查它是否一定会对节点列表造成问题。）返回
文档.getElementsByClassName（“class1 class2”）；
。你知道这是为什么吗？大概是因为你的文档没有包含这两个类的元素，所以没有返回任何元素。它不返回class1、Class2或class3等中的所有元素吗？因为我检查了图像，它们确实有相关的ClasseSSS类名，不能以numb开头呃，请参见：CSS类名不能以数字开头，请参见：