javascript - 使用javascript更改src，仅更改一组图像中的一个

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>