0

我对 JavaScript 真的很陌生。我是新点击图片，该图片也会改变 SRC 和其他图片。

这是代码：

<a href="#pduno"><img onclick="this.src='img/pduno.png';document.getElementsByClassName('imgdp').src='img/pddos.png'" class="imgdp" src="img/pduno.png" width="13" height="11" /></a> 
<a href="#pddos"><img onclick="this.src='img/pduno.png';document.getElementsByClassName('imgdp').src='img/pddos.png'" class="imgdp" src="img/pddos.png" width="13" height="11" /></a>
<a href="#pddos"><img onclick="this.src='img/pduno.png';document.getElementsByClassName('imgdp').src='img/pddos.png'" class="imgdp" src="img/pddos.png" width="13" height="11" /></a>

pduno.png 是“活动”图像，pddos.png 是“非活动”图像。

让我们来看看我有 3 张图片 pduno - pddos - pddos

当我单击 2 个 pddos 之一时，它会变为 pduno，而原来是 pduno 的那个会变为 pddos。我的意思是，只有一个带有 pduno 的图像，而其余的是 pddos。

我正在使用它来创建一个滚动画廊。pduno 用于显示正在展示的画廊。

4

2 回答 2

2

我会为此使用jQuery库（因为您需要使用一些不那么简单的函数）

您可以将其包含在编写此代码中（无需下载任何内容）：

<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.7.2/jquery.min.js" />

然后，我会这样做：

<a href="#pddos"><img class="pdimg" src="img/pduno.png" width="13" height="11" /></a>
<a href="#pddos"><img class="pdimg" src="img/pddos.png" width="13" height="11" /></a>
<a href="#pddos"><img class="pdimg" src="img/pddos.png" width="13" height="11" /></a>

在 HTML 中，我删除了所有脚本，并将它们移至此处：

<script>
$('.pdimg').click(function(){ //This registers the function with the click event
    $('.pdimg').attr('src', 'img/pddos.png'); //This resets the image to pddos
    $(this).attr('src', 'img/pddos.png'); //This sets the image to uno, 
                             // "this" will be the img that you clicked on.
}
</script>
于 2012-04-16T01:11:53.780 回答
1

document.getElementsByClassName将从文档中选择一个节点列表，而不是单个元素。要更改每个选定元素的 src 属性，您必须遍历列表。

此外，要将所有图像重置为 pddos 然后激活其中一个，您不能将一个设置为 pduno 然后全部重置。

于 2012-04-16T01:00:40.350 回答