如何用jQuery多次更改圖像的alt屬性？

這個問題完成了第一個問題，我詢問here如何使用jQuery更改點擊圖像。如何用jQuery多次更改圖像的alt屬性？

我忘了說（即使我後來編輯我的帖子），我正在尋找一種方法，每次點擊更改圖像時都有不同的alt屬性。

（這是爲了更好的可及性和SEO優化。）

下面是實際的HTML代碼感謝altCognito：

<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。

來源

2009-04-21 Mark

@Matt：通常不需要在標題中重複標籤。 – 2010-06-11 13:56:02

呃... SEO和Javascript操作的內容不應該在同一篇文章中開始。無論你做什麼，如果你使用Javascript來顯示你的內容，你會傷害你的搜索引擎可見性。

也就是說，你可以在hasharray（imagename-> alt）中獲取這些圖像，然後從那裏獲取alt，或者可以將alt放入連接到文件名的radio的值中，然後在用於顯示圖像的功能中解析出它們。

...所以在短期或者：

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

來源

2009-04-21 16:56:44

該死的，你打敗了我'存儲圖像的對象'的解決方案。 – 2009-04-21 21:31:15

爲什麼不把ALT值在輸入的相對然後將圖片上太：

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

來源

2009-04-21 17:00:57 Richard

在此單選按鈕我不會使用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'); 

});

你也許可以在一行中做到這一點......但我並沒有真正看到這一點。首先讓它可讀。

來源

2009-04-21 17:01:45

你可以嘗試這樣的事：

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

來源

2009-04-21 17:03:08

只是複製粘貼到新的一頁......你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>

來源

2009-04-21 17:12:19 balexandre

如何用jQuery多次更改圖像的alt屬性？

回答

相關問題