Javascript 单击更改给定图像的预览图像

下面的代码表示网页中预览图像和图像列表的代码

<div class="col-lg-5 text-center">
                    <img src="img/1.jpeg">  //preview image
<hr>
                    <div class="col-lg-3">
                        <img onclick="imagereset()" id="1" src="img/1.jpeg">
                    </div>
                    <div class="col-lg-3">
                        <img onclick="imagereset()" id="2" src="img/2.jpeg">
                    </div>
                    <div class="col-lg-3">
                        <img onclick="imagereset()" id="3" src="img/3.jpeg">
                    </div>
                    <div class="col-lg-3">
                        <img onclick="imagereset()" id="4" src="img/4.jpeg">
                    </div>
                </div>

//预览图像

请帮助我使用javascript函数更新任何图像列表的点击事件预览图像

---

谢谢。

更改HTML代码以向预览图像添加

id

，并将对每个图像的引用传递给

imagereset（）

函数：

<div class="col-lg-5 text-center">
    <img id="preview-img" src="img/1.jpeg">  <!--preview image-->
    <hr>
    <div class="col-lg-3">
        <img onclick="imagereset(this)" id="1" src="img/1.jpeg">
    </div>
    <div class="col-lg-3">
        <img onclick="imagereset(this)" id="2" src="img/2.jpeg">
    </div>
    <div class="col-lg-3">
        <img onclick="imagereset(this)" id="3" src="img/3.jpeg">
    </div>
    <div class="col-lg-3">
        <img onclick="imagereset(this)" id="4" src="img/4.jpeg">
    </div>
</div>

---

你需要发布更多的代码。到目前为止，您尝试了什么？是否可以通过检查图像的id是否为1，然后检查特定的图像源等来动态生成预览图像。

function imagereset(elem) {
    var newSrc;
    switch (elem.id) {
        case "1": newSrc = ...; break;
        ...
    }
    document.getElementById("preview-img").src = newSrc;
}