@risorf

Как обратиться к alt картинки и вывести только те, которые соответствуют условию?

На странице есть много картинок и к каждой прописан тег alt (год) - 2016, 2017...
Картинки в теге a - и при клике увеличиваются.
Как при клике на ссылку, показать только те картинки, которые относятся, к примеру к 2016 году.
остальные скрыть?
  • Вопрос задан
  • 65 просмотров
Решения вопроса 2
@wakenby
document.addEventListener('click', toggleImage)

function toggleImage ({target}) {
  const buttonToggle = target.closest('[show-img-alt]')

  if (buttonToggle === null) return

  const alt = buttonToggle.getAttribute('show-img-alt')
  const allImages = document.querySelectorAll('img')

  for (const img of allImages) {
    if (img.alt !== alt) img.style.display = 'none'
    else img.style.display = ''
  }
}


Или

function toggleImages (alt) {
  const allImg = document.querySelectorAll('img')
  
  for (const img of allImg) {
    if (img.alt !== alt) img.style.display = 'none'
    else img.style.display = ''
  }
}


Или

function toggleImages (alt) {
  document.querySelectorAll('img').forEach(img => img.style.display = 'none')
  document.querySelectorAll(`img[alt="${alt}"]`).forEach(img => img.style.display = '')
}
Ответ написан
TNPTSYWWCC
@TNPTSYWWCC
And I Told Them I Invented Times New Roman
document.addEventListener("click", function (event) {
  const buttonWithYearInDataAttr = event.closest("button[data-year]");
  if (!buttonWithYearInDataAttr) return;

  const images = document.querySelectorAll("<selector of all images>");
  images.forEach(image => {
    image.classList.remove("<class for hide image>");
    image.getAttribute("alt") !== buttonWithYearInDataAttr.dataset.year
      && image.classList.add("<class for hide image>");
  });
});
Ответ написан
Пригласить эксперта
Ответы на вопрос 1
Simkav
@Simkav
document.querySelectorAll("img[alt=2016]")
mdn
Дальше думаю разберетесь
Ответ написан
Ваш ответ на вопрос

Войдите, чтобы написать ответ

Войти через центр авторизации
Похожие вопросы