サムイメージに従ってメインイメージ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の要素を複数持つことはできません。 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メソッドを使用してすべての要素を取得します（SHOULD）。

Answer 3

最初にあなたのIDを再利用している限り、あなたのhtmlは無効です。 $（ "＃simg"）と$（ "。simg"）の違いは、＃がの単一要素を返すことです。同じクラスの要素のセットを返します。