如何 - 单击图像时将不透明度设置为 1 并降低其他图像的不透明度

Question

我这辈子都想不通！我怎样才能做到这一点 - 单击图像时将不透明度设置为 1 并降低其他图像的不透明度？我被告知要向单击的图像添加 class，存储它，然后在单击另一个图像时删除 class？但我想不通！

let items = document.getElementsByClassName("item");
document.body.addEventListener('click', (event) => {
  const el = event.target;
for(var i=0; i< smallImg.length; i++) { 
  if (el.className !== 'sec') return;
  const wasSelected = el.classList.contains('selected');
  for (const d of document.querySelectorAll('div >img'))
    d.classList.remove('selected');
  el.classList.toggle('selected', !wasSelected)
  console.log(".selected");
  }
  
});

.sec:not(:first-child) {
  opacity: 0.3;
}

.sec:not:active{
  opacity: 0.3;
}

<div class="image-container">
          <img
            src="https://source.unsplash.com/400x400/?stationery"
            class="item main-image"
          />
          <div class="secondary-image">
            <img
              src="https://source.unsplash.com/100x100/?pen"
              class="item sec item-1 active "
            />
            <img
              src="https://source.unsplash.com/100x100/?pencil"
              class="item sec item-2"
            />
            <img
              src="https://source.unsplash.com/100x100/?notepad"
              class="item sec item-3"
            />
            <img
              src="https://source.unsplash.com/100x100/?eraser"
              class="item sec item-4"
            />
          </div>

Answer 1

只是 select 当前具有 active class 的元素，如果存在这样的元素，请从中删除 class。然后将其添加到被点击的那个。

（目前不包括任何检查被点击的元素是否实际上是这些图像之一的检查。我只是保留了 body 的一般点击处理程序，请自行优化以仅在需要时应用。）

document.body.addEventListener('click', (event) => {
  let el = event.target;
  let prev = document.querySelector('.secondary-image .active');
  if(prev) {
    prev.classList.remove('active');
  }
  el.classList.add('active');
});

.secondary-image .sec:not(.active) {
  opacity: 0.3;
}

<div class="image-container">
          <img
            src="https://source.unsplash.com/400x400/?stationery"
            class="item main-image"
          />
          <div class="secondary-image">
            <img
              src="https://source.unsplash.com/100x100/?pen"
              class="item sec item-1 active "
            />
            <img
              src="https://source.unsplash.com/100x100/?pencil"
              class="item sec item-2"
            />
            <img
              src="https://source.unsplash.com/100x100/?notepad"
              class="item sec item-3"
            />
            <img
              src="https://source.unsplash.com/100x100/?eraser"
              class="item sec item-4"
            />
          </div>

如何 - 单击图像时将不透明度设置为 1 并降低其他图像的不透明度

How to - When image is clicked set opacity to 1 and lower opacity for other images

javascript

arrays

image-gallery