怎样实现点击某个子元素修改图片？

Question

怎样实现当我双击子某个元素里面的图片后，修改掉当前双击图片，而不影响其它图片！例子：<div calss="box">    <div class="cont-box">        <div class="img">            <img class="db_img" src="xxx.png">        </div>         <div class="img">            <img class="db_img" src="xxx.png">        </div>         <div class="img">            <img class="db_img" src="xxx.png">        </div>         <div class="img">            <img class="db_img" src="xxx.png">        </div>    </div></div>如果我双击其中一个class="db_img"，修改掉图片，其它不变。我现在是第一次修改，不变，点击第二个就会覆盖上一个的图片，怎么解决这个问题，是我的this指向问题吗？

Answer 1

document.querySelectorAll(".db_img").forEach((e, i) => {

    e.addEventListener("click", e => {

        e.target.setAttribute("src","xxx.png");

    });

});