JavaScript更改图片，href onclick = 寻找最简单的方法

Question

当我点击href时，使用JQuery更改图像src的最简单方法是什么？
img id="my_image" class="icon" src="1.png" alt="1.png" border="0" />
< a href="#" id="1">
< a href="#" id="2">
< a href="#" id="3">
1.png, 2.png, 3.png
是否使用#作为Href是可以的，还是最好在此处放置一些JS代码？

- Adrian

Answer 1

您应该在锚点上绑定.bind()^帮助一个.click()^帮助事件监听器。在该监听器中，通过调用.attr()^帮助来更改src属性。

$('a').click(function(event) {
    $('#my_image').attr('src', function(i, src) {
        return event.target.id + '.png';
    });
    return false;
});

- jAndy

---

$('#my_image').attr('src', event.target.id + '.png') 看起来更简单。 - Kees C. Bakker

谢谢，正常工作。但如果页面上有其他href（不是用于更改图像的），该怎么办？ 在这种情况下，其他href也会更改图像，这并不好。 - Adrian

@Adrian：确实，你应该给那些应该改变你的图像的锚点一个唯一的类名，比如“changeimage”。然后通过调用$('a.changeimage').click(function(event) { ...来专门绑定事件到那些锚点。 - jAndy

我正在考虑你的方法和囚犯的方法。使用你的方法，我仍然可以使用转换，但囚犯的替代方案没有使用jQuery更加简单。 - Adrian

jAndy，还有一个问题：我的图片是图表，在每5分钟生成一次。如果我点击hrefs，它们可以完美地加载和更改图片，但不是最新的图片。我需要重新加载整个页面才能加载新的图表。<meta no cache not helped. - Adrian

返回 'cccam'+ event.target.id + '.png?' + Math.floor(Math.random()*9999999); 已帮助，谢谢 - Adrian

Answer 2

<img id="my_image" class="icon" src="1.png" alt="1.png" border="0" />
<a onclick="changeImage(this)" href="#" id="1">1</a>
<a onclick="changeImage(this)" href="#" id="2">2</a>
<a onclick="changeImage(this)" href="#" id="3">3</a>

<script>
function changeImage(thisDiv){
  document.getElementById('my_image').src = thisDiv.id+".png"
}
</script>

编辑：没有看到需要使用jQuery！

- Prisoner

---

我仍然认为这是对问题的一个有用回答。这个网站不仅是直接回答特定问题，也关乎提供有用的可搜索的答案。这并不是一种不合理的实现问题目标的方式。 - jcoder

只剩下两个问题：我需要改变什么才能适用于其他文件名？例如adrian1.png，adrian2.png... 我想使用jQuery，因为它具有过渡效果。但是这种方法行不通吗？如果不行，也没关系 :) - Adrian

如果你想要使用jQuery，我会选择jAndy的解决方案（它需要给每个需要点击的锚点添加一个类）。这样一来，你就不会混淆普通的JavaScript和jQuery。 - Prisoner

Answer 3

这应该可以用:

<a href="javascript:$('#my_image').attr('src', '2.png');" id="1">

- Eric J. Francois

Answer 4

$('a').click(function(e) {
    var id = this.id;
    $('#my_image').attr('src', id + '.png');
    e.preventDefault(); 
});

- Neil