Поворот нескольких изображений с одним классом js

Question

Всем привет, у меня есть много изображений на сайте, каждое изображение должно поворачиваться на 90 градусов при клике. Я это сделал, все работает, но поворачивается лишь одно изображение, остальные не реагируют. Я слышал что класс должен быть уникальным, но неужели мне придется каждому img задавать уникальный класс и в script.js прописывать заново функцию для каждого класса? Есть ли какой-нибудь вариант где поменьше кода)

Answer 1

document.querySelector('.card-grid').addEventListener('click', function(e) {
  if (e.target.tagName === 'IMG') {
    e.target.style.transform = 'rotate(90deg)'
  }
})

$('.card img').on('click', function() {
  $(this).css({
    transform: 'rotate(90deg)'
  })
})

:root {
  --padding: 1rem;
  --color: hsl(200, 50%, 50%);
}

.card-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
  gap: 0.5rem;
  padding: 0.5rem;
}

.card {
  background: white;
  border: 1px solid #777;
  border-radius: 0.25rem;
  overflow: hidden;
}

.card.card-shadow {
  border: none;
  box-shadow: 0 2px 5px 0 rgba(0, 0, 0, 0.2);
}

.card-header {
  font-size: 1.5rem;
  padding: var(--padding);
  padding-bottom: 0;
  margin-bottom: 0.5rem;
}

.card-header.card-image {
  padding: 0;
  overflow: hidden;
}

.card-header.card-image>img {
  display: block;
  width: 100%;
  max-height: 250px;
  aspect-ratio: 16/9;
  object-fit: cover;
  object-position: center;
  transition: 200ms transform ease-in-out;
}

.card:hover>.card-header.card-image>img {
  transform: scale(1.025);
}

.card-body {
  font-size: 0.9rem;
  padding: 0 var(--padding);
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div class="card-grid">
  <div class="card">
    <div class="card-header card-image">
      <img src="https://picsum.photos/200/100?random=1" alt="image" />
    </div>
    <div class="card-body">01 Lorem ipsum dolor sit</div>
  </div>
  <div class="card">
    <div class="card-header card-image">
      <img src="https://picsum.photos/200/100?random=2" alt="image" />
    </div>
    <div class="card-body">02 Lorem ipsum dolor sit</div>
  </div>
  <div class="card">
    <div class="card-header card-image">
      <img src="https://picsum.photos/200/100?random=3" alt="image" />
    </div>
    <div class="card-body">03 Lorem ipsum dolor sit</div>
  </div>
  <div class="card">
    <div class="card-header card-image">
      <img src="https://picsum.photos/200/100?random=4" alt="image" />
    </div>
    <div class="card-body">04 Lorem ipsum dolor sit</div>
  </div>
</div>

Answer 2

Чтобы ответить точно, в чём проблема, нужно видеть твой код, но можно предположить, что ты используешь querySelector('el'), вместо querySelectorAll('el').

Мой вариант решения (вряд ли идеальный, может кто напишет лучше)

const btn = document.querySelector(".btn");
const block = document.querySelectorAll(".block");

btn.addEventListener("click", () => {
  block.forEach((item) => {
    let style = item.style.transform,
        styleNum;
    if (style == "") {
      styleNum = 0;
    } else {
      styleNum = style.match(/\d+/g).join('');
    }
    item.style.transform=`rotate(${+styleNum + 90}deg)`;
  });
});

.box {
  display: flex;
  gap: 12px;
  margin-bottom: 40px;
}
.block {
  padding: 15px;
  width: 100px;
  border: 1px solid green;
}

<div class="box">
  <div class="block">
      Блок
  </div>
  <div class="block">
      Блок
  </div>
  <div class="block">
      Блок
  </div>
</div>
<button type="button" class="btn">Крутить</button>

Answer 3

[...document.querySelectorAll('.img')].forEach((img) =>
{
  img.addEventListener('click', ({target}) => target.classList.toggle('img--rotate'));
})

.img--rotate
{
  transform: rotate(90deg);
}

<img src="https://picsum.photos/200/100?random=1" alt="image" class="img" />
<img src="https://picsum.photos/200/100?random=2" alt="image" class="img" />
<img src="https://picsum.photos/200/100?random=3" alt="image" class="img" />
<img src="https://picsum.photos/200/100?random=4" alt="image" class="img" />
<img src="https://picsum.photos/200/100?random=5" alt="image" class="img" />
<img src="https://picsum.photos/200/100?random=6" alt="image" class="img" />
<img src="https://picsum.photos/200/100?random=7" alt="image" class="img" />
<img src="https://picsum.photos/200/100?random=8" alt="image" class="img" />

БЛОГ НА HUSL

Поворот нескольких изображений с одним классом js

Ответы (3 шт):