这个问题完成了第一个我问here有关如何使用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编辑。
答案 0 :(得分:6)
嗯......由Javascript操纵的SEO和内容不应该在同一篇文章中开头。无论你做什么,如果你使用Javascript来显示你的内容,你就会损害你的搜索引擎可见性。
也就是说,您可以将这些图像放在hasharray(imagename-&gt; 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]);
});
答案 1 :(得分:1)
为什么不将alt值放在输入的rel中,然后将其放在图像上:
<img id="radio_btn1" src="originalimage1.jpg" />
<br />
<input type="radio" name="radio_btn1" value='image1.jpg' rel="alt text 1" />
<input type="radio" name="radio_btn1" value='image2.gif' rel="alt text 1" />
<input type="radio" name="radio_btn1" value='image3.png' rel="alt text 1" />
<input type="radio" name="radio_btn1" value='image4.jpeg' rel="alt text 1" />
And the jquery:
imgFldr = 'images/nameofthesubfolder/';
$("input[type='radio']").click(function() {
$("#radio_btn1").attr("src", imgFldr + $(this).val()).attr("alt", $(this).attr("rel"));
});
答案 2 :(得分:1)
我不会在单选按钮中使用name
属性。定义自定义属性:data-Img
或类似的东西。这也有助于您符合下一个HTML标准。
var imgFldr = 'images/nameofthesubfolder/';
$("input[type='radio']").click(function() {
var img = '#'+ $(this).attr('data-Img');
var url = imgFldr + $(this).attr('value');
$(img).attr('src', url)
.attr('alt', 'newattribute');
});
你可以在一行中做到这一点......但我没有看到这一点。首先让它可读。
答案 3 :(得分:0)
您可以尝试这样的事情:
<img id="radio_btn1" src="originalimage1.jpg" />
<br />
<input type="radio" name="radio_btn1" value='image1' />
<input type="radio" name="radio_btn1" value='image2' />
<input type="radio" name="radio_btn1" value='image3' />
<input type="radio" name="radio_btn1" value='image4' />
imgFldr = 'images/nameofthesubfolder/';
var images = {
image1: {'img': 'image1.jpg', 'alt': 'Alt for img1'},
image2: {'img': 'image2.gif', 'alt': 'Alt for img2'},
image3: {'img': 'image3.png', 'alt': 'Alt for img3'},
image4: {'img': 'image4.jpeg', 'alt': 'Alt for img4'}
}
$("input[type='radio']").click(function() {
var imgObject = images[this.value];
$('#'+this.name).attr('src', imgFldr+imgObject['img']).attr('alt', imgObject['alt']);
});
答案 4 :(得分:0)
只需将粘贴复制到新页面中......您有 2种更改方式。
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en">
<head>
<meta http-equiv="Content-type" content="text/html; charset=utf-8" />
<title>Sandbox</title>
<style type="text/css" media="screen">
body { background-color: #000; font: 16px Helvetica, Arial; color: #fff; }
</style>
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.3.2/jquery.min.js"></script>
<script type="text/javascript">
imgFldr = 'http://www.kde-look.org/CONTENT/content-m1/';
$(document).ready(function(){
$("input[type='radio']").each( function(index) {
var $radio = this;
var alt = '';
switch (index + 1) {
case 1: alt = 'alt 1'; break;
case 2: alt = 'alt 2'; break;
case 3: alt = 'alt 3'; break;
case 4: alt = 'alt 4'; break;
}
console.log('img ' + (index+1) + ': ' + $radio.value + ' with alt: ' + alt);
$(this).click(function() {
// 1st way: using mynewalt attribute of the radio button (you can delete the switch case if you choose to use this)
$('#myImage').attr('src', imgFldr+$radio.value).attr('alt', $(this).attr('mynewalt'));
//2nd way: using the switch
$('#myImage').attr('src', imgFldr+$radio.value).attr('alt', alt);
});
});
});
</script>
</head>
<body>
<img id="myImage" src="http://www.kde-look.org/CONTENT/content-m1/m100860-1.png" />
<br />
<input type="radio" name="radio_btn1" value='m102389-1.png' mynewalt='new alt 1' />
<input type="radio" name="radio_btn1" value='m100856-1.png' mynewalt='new alt 2' />
<input type="radio" name="radio_btn1" value='m100857-1.png' mynewalt='new alt 3' />
<input type="radio" name="radio_btn1" value='image4.jpeg' mynewalt='new alt 4' />
</body>
</html>