javascript - 仅适用于第一张图像的翻转效果。选择其他缩略图后取消

Question

我有一个运行缩略图查看器的 Javascript：

var lastID = 0;
function SelectImg(id) {
    if (lastID > 0) {
        document.getElementById(lastID).className = "thumbNormal";
    }
    document.getElementById(id).className = "thumbSelected";
    document.getElementById(0).src = document.getElementById(id).src;
    lastID = id;
}
function LoadTrigger() {
    SelectImg(1);
}
window.onload = LoadTrigger;

三张图片的 HTML 是这样的

<tbody>
    <tr>
        <td class="image">
            <img id=0 src="<?=$row['picture_noglow']?>"
            onmouseover="this.src='imgs/collection/KN/main/KNB01_Ga.jpg'"
            onmouseout="this.src='imgs/collection/KN/main/KNB01_Na.jpg'">
        </td>
        <td class="imagestack">
            <img id=1 class="thumbNormal" src="<?=$row['picture_noglow']?>" width=70 onclick="SelectImg(1)" /><p>
            <img id=2 class="thumbNormal" src="imgs/collection/defaultcase_backview_black.jpg" width=70 onclick="SelectImg(2)"><p>
            <img id=3 class="thumbNormal" src="imgs/collection/defaultcase_sideview_black.jpg" width=70 onclick="SelectImg(3)">
        </td>
    </tr>
</tbody>

I want to apply a rollover to id=1only, so that when the first image is selected it will have a rollover effect. 如果我选择了图像 2 或 3，则翻转停止。

现在，当我选择图像 2 或 3 时，仍然会发生翻转。

Answer 1

您只需要测试是否id=1选择了图像：

function mouseOverFirstImage() {
   var img1 = document.getElementById("1");

   // Test if the image is selected (if more than 1 class can
   // be applied change this test to "img1.className.match(/thumbSelected/)"
   if(img1.className === "thumbSelected")
       document.getElementById("0").src = <newImageSrc>;
}

function mouseOutFirstImage() {
   var img1 = document.getElementById("1");

   if(img1.className === "thumbSelected")
       document.getElementById("0").src = <normalImageSrc>;
}

function LoadTrigger() {
    // Add the 3 following lines to this function
    // in order to have a rollover effect
    var mainImage = document.getElementById("0");
    mainImage.onmouseover = mouseOverFirstImage;
    mainImage.onmouseout = mouseOutFirstImage;

    SelectImg(1);
}