Question

我创建了一个非常简单的javascript函数，当我将鼠标悬停在某些单词上时，具有某个id的元素变得透明。这对我的img代码工作正常，但div具有相同ID但不会改变？

这是我的javascript：

function revealCategory1() {
document.getElementById('c2').style.opacity="0.3";
document.getElementById('c3').style.opacity="0.3";
document.getElementById('c4').style.opacity="0.3";
}

function revealCategory2() {
document.getElementById('c1').style.opacity="0.3";
document.getElementById('c3').style.opacity="0.3";
document.getElementById('c4').style.opacity="0.3";
}

function revealCategory3() {
document.getElem..............etc

function resetReveal() {
document.getElementById('c1').style.opacity="1";
document.getElementById('c2').style.opacity="1";    
document.getElementById('c3').style.opacity="1";    
document.getElementById('c4').style.opacity="1";    
}

http://jsfiddle.net/u6XG2/

这个html正在调用：

<div class="bars">
<span class="categories" id="c1" onMouseOver="revealCategory1()" onMouseOut="resetReveal()">VIDEO</span>
<span class="categories" id="c2" onMouseOver="revealCategory2()" onMouseOut="resetReveal()">ANIMATION</span>
<span class="categories" id="c3" onMouseOver="revealCategory3()" onMouseOut="resetReveal()">DESIGN</span>
<span class="categories" id="c4" onMouseOver="revealCategory4()" onMouseOut="resetReveal()">WEB-DESIGN</span>
</div>

在页面上，这是完全正常的。图像变得透明。

<div class="logocontainer" >
<img class="logo" id="c1" src="images/DOSED-C1.png" />
<img class="logo" id="c2" src="images/DOSED-C2.png" />
<img class="logo" id="c3" src="images/DOSED-C3.png" />
<img class="logo" id="c4" src="images/DOSED-C4.png" />
</div>

但这不是，div不透明。

<div class="maincontent">
<div id="c1" class="content" >VIDEO PIECE 1</div>
<div id="c2" class="content" >ANIMATION PIECE 1</div>
<div id="c3" class="content" >DESIGN PIECE 1</div>
<div id="c4" class="content" >WEB-DESIGN PIECE 1</div>
</div>

Answer 1

您不能拥有两个（或更多）具有相同ID的元素。

让图片ID命名不同。即：

<img class="logo" id="c1_image" src="images/DOSED-C1.png" />

然后，对两个ID执行操作：

function resetReveal() {
    document.getElementById('c1').style.opacity="1";
    document.getElementById('c1_image').style.opacity="1";

另外，请从<spans>元素的.bars中删除这些ID。他们现在什么都不做。

<span class="categories" onMouseOver="revealCategory1()" onMouseOut="resetReveal()">VIDEO</span>

Answer 2

很抱歉这么说，但这是一个非常常见的错误，但所有ID必须是唯一的。它的名称标签可以复制。

另一个想法是使用一个类元素和document.getElementsByClassName方法，然后回过头来返回挑选出你想要的那些元素的数组，对于那些不允许使用name标签的元素来说这是一个很好的元素。 / p>

为什么我的DIV没有响应我的Javascript不透明度函数？

2 个答案: