Question

我正在尝试使用div来切换点击时多个其他div的不透明度。如果有人能指出我正确的方向，我会在这里出错，那将是伟大的：）

function toggle_opacity(className) {
   var x = document.getElementsByClassName(className);
   if(x.style.opacity == '0')
      x.style.opacity = '1';
   else
      x.style.opacity = '0';
}

Answer 1

getElementsByClassName将返回一个数组，因此将代码包装在一个循环中：

function toggle_opacity(className) {
    var x = document.getElementsByClassName(className);
    for(i = 0; i < x.length; i++){
        if(x[i].style.opacity == '0')
          x[i].style.opacity = '1';
        else
          x[i].style.opacity = '0';
    }
}

Answer 2

Your JSFiddle有3个问题。

1）document.getElementsByClassName(className)返回一个数组，因此您需要选择第一个元素：

var x = document.getElementsByClassName(className)[0];

2）您的if需要检查不透明度是0，而不是'0'。

3）你的JS需要在<head>，而不是onLoad。

这是一个updated JSFiddle。

Answer 3

使用更改更新了Fiddle：

我已将功能更改为符合您的要求。

e1[0].style.opacity = '1';
e1[1].style.opacity = '0';

添加了这两行。

Answer 4

可能你想要这个我完成了jquery

HTML -

<div id="div_1" class="ope">
</div>
<div id="div_2" class="ope">
</div>
<div id="div_3" class="ope">
</div>

的CSS ---

.ope{
    width:200px;
    height:100px;
    background-color:pink;
    margin-bottom:4px;
    cursor:pointer;
}

的jquery -

$(document).ready(function(){
    $(".ope").click(function(){
        var thisdiv = $(this).attr('id');
        //alert(thisdiv);
         $(".ope").css('opacity','1');
        $("#"+thisdiv).css('opacity','0.5');

    })
})

单击另一个div时切换div的不透明度

4 个答案: