0

在我的 Web 应用程序中，我正在使用 javascript 更改 HTML 元素的样式。

请参阅下面的代码，

function layout() {
    if(document.getElementById('sh1').getAttribute('src') == "abc.png") {
        document.getElementById("sh1").style.display="none";
    } else {
        document.getElementById("sh1").style.display="block";
    }
}

和 HTML 是：

<img id="sh1" src="abc.png" />

现在我想要如果 img 元素样式是 display:none; 然后在元素下方

<p id="Text1">Name<br />description</p>

样式也应该更改为 display:none; 如果 img 元素样式是 display:block; 那么上面的 Elements 样式也应该更改为 display:block; 自动地。

这如何实现？

4

3 回答 3

1

在你的函数中添加其他元素。像这样的东西：

function layout(){
    if(document.getElementById('sh1').getAttribute('src') == "abc.png"){
        document.getElementById("sh1").style.display="none";
        document.getElementById("Text1").style.display="none";
    } else {
        document.getElementById("sh1").style.display="block";
        document.getElementById("Text1").style.display="Block";
    }
}

或者如果您将两者都放在一个容器中，您可以对整个容器执行一项操作 =)

于 2013-05-14T13:12:17.793 回答
0

如果我对您的理解正确，那么您在此之后 

function layout(){
  if(document.getElementById('sh1').getAttribute('src') == "abc.png"){
    document.getElementById("sh1").style.display="none";
    document.getElementById("Text1").style.display = "none"; //Hide the description
  } else {
    document.getElementById("sh1").style.display="block";
    document.getElementById("Text1").style.display="block"; //Show the description
  }
}

如果这个函数是这个图像和描述所独有的，那么这应该很好地工作，显然如果有一大堆图像你正在应用这个逻辑，那么有一个更有效的方法来实现这个通用函数。

于 2013-05-14T13:12:40.127 回答
0

我建议只使用 jQuery 并更改标记以将图像和文本包装在一起。也可以查看一个工作示例的链接。

<figure id="sh1" class="picture active">
   <img src="http://placehold.it/100x100&text=abc.png" />
    <figcaption><span class="name">ABC</span><span class="desc">This is a description</span>
    </figcaption>
</figure>

<figure id="sh2" class="picture">
   <img src="http://placehold.it/100x100&text=xyz.png" />
    <figcaption><span class="name">XYZ</span><span class="desc">This is a description</span>
    </figcaption>
</figure>

http://jsfiddle.net/Qvb4U/1/

于 2013-05-14T13:30:50.413 回答