Jquery 根据拇指图像单击更改主图像src属性

我需要更改主图像src属性根据拇指图像点击。 但我只得到第一个拇指图像src，没有得到其他拇指图像src为什么

$(document).ready(function(){
$("#simg").click(function(){
    alert($(this).attr('src'));
});  
});

<img src="main.jpg"  />

<table width="100%" border="0" cellpadding="0" cellspacing="0" class="paddingTop">
<tr>
<td align="left" valign="top"><img src="1.jpg" border="0" id="simg" /></td>
<td align="left" valign="top"><img src="2.jpg" border="0" id="simg" /></td>
<td align="left" valign="top"><img src="3.jpg" border="0" id="simg" /></td>
<td align="left" valign="top"><img src="4.jpg" border="0" id="simg" /></td>
</tr>
</table>

$（文档）.ready（函数（）{
$（“#simg”）。单击（函数（）{
警报（$（this.attr（'src'））；
});  
});

不能有多个元素具有相同的

id

。ID在HTML中必须是唯一的。改为使用类：

<table width="100%" border="0" cellpadding="0" cellspacing="0" class="paddingTop">
    <tr>
        <td align="left" valign="top"><img src="1.jpg" border="0" class="simg" /></td>
        <td align="left" valign="top"><img src="2.jpg" border="0" class="simg" /></td>
        <td align="left" valign="top"><img src="3.jpg" border="0" class="simg" /></td>
        <td align="left" valign="top"><img src="4.jpg" border="0" class="simg" /></td>
    </tr>
</table>

---

这里有一个。

而不是

id

，你可以（应该）使用

class

选择多个元素。然后使用

。每个

方法检索所有元素。

首先，只要你重复使用id，html就无效。$（“#simg”）或$（“.simg”）之间的区别在于#返回的是一个单个元素。返回一组具有相同类的元素

$(document).ready(function() {
    $(".simg").click(function() {
        alert($(this).attr('src'));
    });  
});