jquery - 根据缩略图点击更改主图像 src 属性

Question

我需要根据缩略图点击更改主图像 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>

Answer 1

多个元素不能具有相同的 id。 HTML 中的 ID 必须是唯一的。使用类来代替:

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

然后:

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

这是一个 live demo .