如何在点击时更改图像和alt属性？ [英] How to change image and alt attribute on click?
问题描述
我希望使用JQuery而不是普通的JavaScript更改几个图像，并同时更改图像alt属性以便访问。
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.
它应该是一些简单的事情，因为我不打算对变化做一些特殊的影响，但我仍然没有找到任何关于它的东西。
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.
这是我用JS做的方式（不更改alt属性）：
Here is the way I was doing with JS (without change the alt attribute):
<!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>
有没有办法避免重复图片/ nameofthesubfolder /？
And is there a way to avoid repeating images/nameofthesubfolder/ ?
编辑：非常感谢altCognito，但我不明白如何使用此代码为每个图片设置不同的alt属性。也许我忘了提到我正在寻找它（我的坏）。
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).
推荐答案
让我们来看看吧。 （我最初冲过去了）
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' />
然后是jQuery：
imgFldr = 'images/nameofthesubfolder/';
$("input[type='radio']").click(function() {
$('#'+this.name).attr('src', imgFldr+this.value).attr('alt', 'newattribute');
});
查看示例。
您可以在此处进行编辑： http://jsbin.com/esebu/edit
You can edit it here: http://jsbin.com/esebu/edit
这篇关于如何在点击时更改图像和alt属性？的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！
