jQuery 单击时如何更改图像和 alt 属性？
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/739267/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me):
StackOverFlow
How to change image and alt attribute on click?
提问by Mark
I'm looking to change several images onclick using JQuery instead of normal JavaScript and also change the image alt attribute at the same time for accessibility.
我希望使用 JQuery 而不是普通的 JavaScript 来更改多张图片 onclick 并同时更改图片 alt 属性以实现可访问性。
It should be something easy as I'm not looking to do some special effect on change but I still haven't find anything about it.
这应该很容易，因为我不希望对变化产生一些特殊影响，但我仍然没有找到任何关于它的信息。
Here is the way I was doing with JS (without change the alt attribute):
这是我使用 JS 的方式（不更改 alt 属性）：
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<title>Change Image using Javascript</title>
<script type="text/javascript">
function changeImg(image_id, image_folder){
document.getElementById(image_id).src = image_folder;
}
</script>
</head>
<body>
<div align="center">
<img id="image1" src="images/nameofthesubfolder/originalimage1.jpg" alt="Original Image 1" />
<br />
<label><input type="radio" name="radio_btn1" onclick="changeImg('image1', 'images/nameofthesubfolder/image1.jpg')"/>Image 1</label>
<label><input type="radio" name="radio_btn1" onclick="changeImg('image1', 'images/nameofthesubfolder/image2.gif');"/>Image 2</label>
<label><input type="radio" name="radio_btn1" onclick="changeImg('image1', 'images/nameofthesubfolder/image3.png');"/>Image 3</label>
<label><input type="radio" name="radio_btn1" onclick="changeImg('image1', 'images/nameofthesubfolder/image4.jpeg');"/>Image 4</label>
<br />
<br />
<img id="image2" src="images/nameofthesubfolder/originalimage2.jpg" alt="Original Image 2" />
<br />
<label><input type="radio" name="radio_btn2" onclick="changeImg('image2', 'images/nameofthesubfolder/image5.gif')"/>Image 5</label>
<label><input type="radio" name="radio_btn2" onclick="changeImg('image2', 'images/nameofthesubfolder/image6.png);"/>Image 6</label>
<label><input type="radio" name="radio_btn2" onclick="changeImg('image2', 'images/nameofthesubfolder/image7.jpeg');"/>Image 7</label>
<label><input type="radio" name="radio_btn2" onclick="changeImg('image2', 'images/nameofthesubfolder/image8.gif');"/>Image 8</label>
</div>
</body>
</html>
And is there a way to avoid repeating images/nameofthesubfolder/ ?
有没有办法避免重复 images/nameofthesubfolder/ ？
Edit:Thanks a lot altCognito but I don't understand how to use this code to have a different alt attribute for each image. Maybe I forgot to mention that I was looking for it (my bad).
编辑：非常感谢 altCognito，但我不明白如何使用此代码为每个图像设置不同的 alt 属性。也许我忘了提及我正在寻找它（我的错）。
回答by cgp
Let's go with this. (I rushed through this initially)
让我们一起去吧。（我一开始就匆匆忙忙地完成了）
<img id="radio_btn1" src="originalimage1.jpg" />
<br />
<input type="radio" name="radio_btn1" value='image1.jpg' />
<input type="radio" name="radio_btn1" value='image2.gif' />
<input type="radio" name="radio_btn1" value='image3.png' />
<input type="radio" name="radio_btn1" value='image4.jpeg' />
And then the jQuery:
然后是jQuery：
imgFldr = 'images/nameofthesubfolder/';
$("input[type='radio']").click(function() {
$('#'+this.name).attr('src', imgFldr+this.value).attr('alt', 'newattribute');
});
You can edit it here: http://jsbin.com/esebu/edit
你可以在这里编辑它：http: //jsbin.com/esebu/edit
回答by Berker Yüceer
You dont actually need that much code change..
您实际上不需要那么多代码更改..
Here is an example:
下面是一个例子：
function changeImg(image_id, image_folder) {
$("#" + image_id).attr({ 'src': image_folder, 'alt': image_folder });
}
And you can keep ur html code..
你可以保留你的html代码..
<label><input type="radio" name="radio_btn2" onclick="changeImg('image2', 'images/nameofthesubfolder/image5.gif')"/>Image 5</label>
