Question

我是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用于显示正在显示的库。

Answer 1

我会使用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>

Answer 2

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

此外，要将所有图像重置为pddos然后激活一个图像，则无法将其设置为pduno然后重置所有图像。

使用javascript更改src只有一组图像中的一个

2 个答案: