5

我希望使用 JQuery 而不是普通的 JavaScript 更改几个图像 onclick，并同时更改图像 alt 属性以实现可访问性。

这应该很容易，因为我不想对变化做一些特殊的影响，但我仍然没有找到任何关于它的东西。

这是我使用 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>

有没有办法避免重复图像/子文件夹的名称/？

编辑：非常感谢 altCognito 但我不明白如何使用此代码为每个图像设置不同的 alt 属性。也许我忘了提到我正在寻找它（我的错）。

4

2 回答 2

8

让我们一起去吧。（我一开始就匆匆忙忙）

<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

于 2009-04-11T00:53:59.213 回答
4

您实际上不需要那么多代码更改..

这是一个例子：

function changeImg(image_id, image_folder) {
    $("#" + image_id).attr({ 'src': image_folder, 'alt': image_folder });
}

你可以保留你的html代码..

 <label><input type="radio" name="radio_btn2" onclick="changeImg('image2', 'images/nameofthesubfolder/image5.gif')"/>Image 5</label>
于 2011-08-25T13:22:50.353 回答