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

我正在尝试获取多个元素，这些元素是根据3个数组“顶部”，“底部”，“鞋子”组织的。使用javascript更改多个图像的样式（不透明度）

我知道我可以使用

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'; 
     } 

}

来源

2012-10-24 Unistudent

CSS类名不得以数字开头，请参阅：http://stackoverflow.com/questions/448981/what-characters-are-valid-in-css-class-names – feeela

你是密切与for循环：

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

应该<edit>但不会</edit>工作。每次迭代i是下一个密钥，不是下一个值。

但应使用常规for而非for..in：

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

编辑：我建议一个常规for循环，因为使用for..in通常是不适合的阵列或阵列状物体为（取决于它会遍历非数字属性。约瑟夫的评论证实，在这种情况下，for..in绝对不会出于这个原因。

来源

2012-10-24 09:58:09 nnnnnn

实际上第一个将不起作用因为...的语法。在遍历nodeList对象时，它们有一个长度属性，然后抱怨没有style属性。你提供的第二个应该工作。 –

谢谢约瑟夫 - 答案更新了一点。（很明显，我建议使用传统的for循环，因为这样的事情可能会发生，但我没有仔细检查它是否肯定会成为NodeLists的问题。） – nnnnnn

'document.getElementsByClassName（“class1 class2”）; '返回'[]'。你知道这是为什么吗？ – Unistudent

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

回答

相关问题