Выберите изображение содержит специальный класс - чистый JavaScript

Question

У меня есть эта структура HTML, и я передал изображение src каждому <img> с помощью JavaScript. Теперь мне нужно выбрать <img>, щелкнув , присвоить выбранному изображению класс, подобный .active и , если я нажму на другое изображение, чтобы выбрать его, удалить .active из другого <img> и присвоить ему активный класс .

---

HTML:

<div class="images d-flex flex-wrap my-4">
    <div class="smallImages">
        <img id="bgImage1" src="" alt="">
    </div>
    <div class="smallImages">
        <img id="bgImage2" src="" alt="">
    </div>
    <div class="smallImages">
        <img id="bgImage3" src="" alt="">
    </div>
</div>

---

Javascript:

const imgThumbnail = document.querySelectorAll('.smallImages');

for ( let i = 1; i <= imgThumbnail.length; i++ ) {
  let imgId = document.querySelector('#bgImage'+ i + '');
  let imgSrc = imgId.src = './img/bg' + i + '.jpg';
}

---

Если это поможет, мои изображения будут выглядеть так:

./img/bg1.jpg
./img/bg2.jpg
...

Answer 1

Вы можете использовать

const imgThumbnail = [...document.querySelectorAll('.smallImages img')];

// setup src and events
imgThumbnail.forEach((img,index)=>{
  img.src = `./img/bg${index+1}.jpg`;
  img.addEventListener('click', function(e){
    const current = imgThumbnail.find(img=>img.matches('.active'));
    current && current.classList.remove('active');
    this.classList.add('active');
  })
})

img{width:50px;height:50px;background:gray;display:inline-block;}
.active{border:3px solid red;}

<div class="images d-flex flex-wrap my-4">
    <div class="smallImages">
        <img id="bgImage1" src="" alt="">
    </div>
    <div class="smallImages">
        <img id="bgImage2" src="" alt="">
    </div>
    <div class="smallImages">
        <img id="bgImage3" src="" alt="">
    </div>
</div>

Answer 2

Сохраните изображение, по которому щелкнули, и добавьте класс в список классов, по которому щелкнули.

Я использую onclick, вы можете использовать addEventListener, если вам нужно.

var saveImage = "";
document.querySelector(".images").onclick=function(e) {
  if (e.target.tagName=="IMG") {
    if (saveImage) saveImage.classList.remove("active");
    e.target.classList.add("active");
    saveImage = e.target;
  }
}  

.active { border: 1px solid red }

<div class="images d-flex flex-wrap my-4">
    <div class="smallImages">
        <img id="bgImage1" src="https://via.placeholder.com/50x50?text=1" alt="">
    </div>
    <div class="smallImages">
        <img id="bgImage2" src="https://via.placeholder.com/50x50?text=2" alt="">
    </div>
    <div class="smallImages">
        <img id="bgImage3" src="https://via.placeholder.com/50x50?text=3" alt="">
    </div>
</div>