Ändern Sie das src-Attribut des Hauptbildes entsprechend dem Klick auf das Vorschaubild

Question

Ich muss das src-Attribut des Hauptbildes entsprechend dem Klick auf das Daumenbild ändern. Aber ich bekomme nur erste Thumb Image src, nicht immer andere Thumb Image src warum dies?

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

Sie können nicht mehrere Elemente mit demselben id . Ids müssen in HTML eindeutig sein. Verwenden Sie stattdessen eine Klasse:

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

und dann:

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

Und hier ist ein Live-Demo .

Answer 2

Anstelle von id können (SOLLTEN) Sie verwenden class um mehrere Elemente auszuwählen, und verwenden Sie dann .each Methode, um alle Elemente abzurufen.

Answer 3

Zunächst einmal ist Ihre HTML-Datei nicht gültig, solange Sie die IDs wiederverwenden. Der Unterschied zwischen $("#simg") und $(".simg") ist, dass das # eine einziges Element gibt jedoch eine Menge von Elementen mit der gleichen Klasse zurück.