Javascript 使用图像URL动态添加图像的替代文本是否可行？

我有这个问题，我需要根据图像源更改备用文本。例如，我有一个标记为images的文件夹，其中包含项目使用的所有图像

<table id="OptionPics">
    <tr><td><img id="OptionPic1" alt="" src="images/selection1.png" /></td></tr>
    <tr><td><img id="OptionPic2" alt="" src="images/selection2.png" /></td></tr>
    <tr><td><img id="OptionPic3" alt="" src="images/selection3.png" /></td></tr>
</table>
<table id="SelectedPicTable">
    <tr>
        <td>
            <img id="SelectedPic" alt="" src="images/placeholder.png" />
        </td>
    </tr>
</table>

我想知道的是，是否可以根据单击的图像更改SelectedPic的alt？

---

例如，如果单击了选项pic1，则SelectedPic的alt应该是的“selection1”，而不是图像/selection1.png”

如何控制图像中的点击？这是纯javascript还是使用jQuery

现在使用jQuery非常普遍，我假设您正在使用它：

<table id="OptionPics">
<tr><td><img id="OptionPic1" class="options" alt="" src="images/selection1.png" /></td></tr>
<tr><td><img id="OptionPic2" class="options" alt="" src="images/selection2.png" /></td></tr>
<tr><td><img id="OptionPic3" class="options" alt="" src="images/selection3.png" /></td></tr>
</table>

<table id="SelectedPic">
<tr><td><img id="SelectedPic" alt="" src="images/placeholder.png" /></td></tr>
</table>

---

如果您没有心情使用jQuery，那么这里是纯JS：

HTML:

JS:

var-imgs=document.getElementsByClassName（“optPics”）；
对于（变量i=0；i

关于上述代码的几点简要说明：请注意，我还更改了title属性-更改alt在某些版本的FireFox中没有任何效果，其他版本可能也会忽略对alt属性的更改。更改“title”属性会更改悬停文本。我将这两个属性都包括在内以供参考

---

此外，我正在按照您的要求剥离图像路径，但是如果出于某种原因，您的图像在文件名后会有“/”字符，则需要修改此代码。在我的示例中，我使用querystring来区分图像，因此我不剥离扩展名，但是如果您只想要文件名，请将相应的行更改为

varimageName=imageParts[imageParts.length-1]。拆分（'.）[0]；

是的，这是绝对可能的。您这样做是为了让您的页面进行验证吗？因为，在javascript运行时，验证通常已经发生。您不应该有两个id相同的元素…或：

$（'#OptionPics'）。on（'click'，“img“，function（）

，因为我不能让睡狗躺着，所以这里有一个版本应该可以相当普遍地工作

$(document).ready(function(){
    $('img.options').on('click', function(){ //everytime a image is clicked
        var i = $(this); //handle to the clicked image
        $('img#SelectedPic').attr('src', i.attr('src')).attr('alt', i.attr('alt'));
        //insert into image with the SelectedPic ID, the same src and alt attributes of the clicked image
    });
});

<table id="OptionPics">
<tr><td><img class="OptionPic1 optPics" alt="" src="http://jsfiddle.net/img/logo.png?image=1" /></td></tr>
<tr><td><img class="OptionPic2 optPics" alt="" src="http://jsfiddle.net/img/logo.png?image=2" /></td></tr>
<tr><td><img class="OptionPic3 optPics" alt="" src="http://jsfiddle.net/img/logo.png?image=3" /></td></tr>
</table>

<table id="SelectedPicTable">
<tr><td><img id="SelectedPic" alt="" src="http://jsfiddle.net/img/logo.png" /></td></tr>
</table>

var imgs = document.getElementsByClassName("optPics");
for(var i = 0; i < imgs.length; i++)
{
    (function(image){
        image.onclick=function(){
            var imageParts = image.src.split('/');
            var imageName = imageParts[imageParts.length-1];
            document.getElementById("SelectedPic").alt=imageName;
            document.getElementById("SelectedPic").title=imageName;
        }
    }(imgs[i]))
}