0

我正在尝试让一个 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';
}
4

4 回答 4

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';
    }
}
于 2013-09-26T06:25:53.243 回答
0

您的 JSFiddle有 3 个问题。

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

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

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

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

这是一个更新的 JSFiddle。

于 2013-09-26T06:28:42.690 回答
0

已通过更改更新了Fiddle：

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

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

添加了这两行。

于 2013-09-26T06:30:21.730 回答
0

也许你想要这个我用 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');

    })
})
于 2013-09-26T06:34:56.203 回答