javascript - 如何一次在多个标签上添加事件侦听器

Question

我是 Javascript 新手。我有这些图像要在 main-img 上替换。下面的代码工作正常，但我只想知道如何通过在 Javascript 中使用更少的代码来做到这一点。

<div id="container">
        <div id="side-img">
            <img id="side1" onclick="side1()" src="img1.jpeg">
            <img id="side2" onclick="side2()" src="img2.jpeg">
            <img id="side3" onclick="side3()" src="img3.jpeg">
            <img id="side4" onclick="side4()" src="img4.jpeg">
        </div>
        <div id="main-img">
            <img id="main" src="img0.jpeg">
        </div>
        
    </div>
    
    
    
    
    <script type="text/javascript">
        var sideimg = document.querySelectorAll('#side-img img');
        var main = document.querySelector('#main');
    
             function side1() {
                main.src = sideimg[0].src;
             }
             function side2() {
                main.src = sideimg[1].src;
             }
             function side3() {
                main.src = sideimg[2].src;
             }
             function side4() {
                main.src = sideimg[3].src;
             }
            
        
    </script>

标签： javascripthtmlevent-handlingdom-eventsaddeventlistener

Answer 1

您可以以编程方式为每个图像附加一个 onclick 处理程序。

document.querySelectorAll('img').forEach((img) => {
  img.onclick = () => {
    console.log(img.src)
    document.querySelector('#main').src = img.src
  }
})

<div id="container">
  <div id="side-img">
    <img id="side1" src="img1.jpeg">
    <img id="side2" src="img2.jpeg">
    <img id="side3" src="img3.jpeg">
    <img id="side4" src="img4.jpeg">
  </div>
  <div id="main-img">
    <img id="main" src="img0.jpeg">
  </div>

</div>