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

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) => {&nbsp; &nbsp; e.addEventListener("click", e => {&nbsp; &nbsp; &nbsp; &nbsp; e.target.setAttribute("src","xxx.png");&nbsp; &nbsp; });});