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的多个元素。 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>

然后：

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

这是一个live demo。

Answer 2

而不是id，您可以（应该）使用class来选择多个元素。然后使用.each方法检索所有元素。

Answer 3

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

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

3 个答案: