如何使用jQuery多次更改图像的alt属性？

Question

这个问题完成了我在这里问到的第一个关于如何使用jQuery更改点击图像的问题.

我忘了说(即使我后来编辑了我的帖子)我正在寻找一种方法,每次通过点击更改图像时都有不同的alt属性.

(这是为了更好的可访问性和SEO优化.)

以下是感谢altCognito的实际html代码:

<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');
});

它可以在jsbin上编辑.

Answer 1

嗯...由Javascript操纵的SEO和内容不应该在同一篇文章中开头.无论你做什么,如果你使用Javascript来显示你的内容,你就会损害你的搜索引擎可见性.

也就是说,您可以将这些图像放在hasharray(imagename-> alt)中并从那里获取alt,或者您可以将alt放在连接到文件名的无线电值中,并使用分隔符.然后在用于显示图像的函数中解析它们.

......所以简而言之:

<img id="radio_btn1" src="originalimage1.jpg" />
<br />
  <input type="radio" name="radio_btn1" value='image1.jpg|Image 1' />
  <input type="radio" name="radio_btn1" value='image2.gif|Image 2' />
  <input type="radio" name="radio_btn1" value='image3.png|Image 3' />
  <input type="radio" name="radio_btn1" value='image4.jpeg|Image 4' />

+

imgFldr = 'images/nameofthesubfolder/';
$("input[type='radio']").click(function() {
   var strarr = this.value.split('|');
   if(strarr.length < 2) return;
   $('#'+this.name).attr('src', imgFldr+strarr[0]).attr('alt', strarr[1]);
});

...要么:

<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' />

+

imgFldr = 'images/nameofthesubfolder/';
var imagesarr = {'image1.jpg': 'Image 1', 'image2.gif': 'Image 2','image3.png': 'Image 3','image4.jpeg': 'Image 4'}
$("input[type='radio']").click(function() {
   $('#'+this.name).attr('src', imgFldr+this.value).attr('alt', imagesarr[this.value]);
});