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

Question

[risorf]

На странице есть много картинок и к каждой прописан тег alt (год) - 2016, 2017...
Картинки в теге a - и при клике увеличиваются.
Как при клике на ссылку, показать только те картинки, которые относятся, к примеру к 2016 году.
остальные скрыть?

Answer 1

[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 = '')
}

Comments

[risorf]

function toggleImages (alt) {
var photos = document.querySelector('.photos');
photos.querySelectorAll('a').forEach(a => a.style.display = 'none')
photos.querySelectorAll(`img[alt="${alt}"]`).forEach(a => a.style.display = '')
}

подскажите, не получается отобразить картинку , которая в ссылке находится
т.е. строка - photos.querySelectorAll(`img[alt="${alt}"]`).forEach(a => a.style.display = '')
мне нужно сравнить по альту, а далее отобразить ссылку вместе с картинкой.
это никак не получается.

[wakenby]

risorf, Покажите верстку, без нее могу только гадать

[risorf]

wakenby,

<script>
function toggleImages (alt) {
  var photos = document.querySelector('.photos');
  photos.querySelectorAll('a').forEach(a => a.style.display = 'none')
  photos.querySelectorAll(`img[alt="${alt}"]`).forEach(a => a.style.display = '')
}

function toggleImages2 () {
  var photos2 = document.querySelector('.photos');
  photos2.querySelectorAll('a').forEach(a => a.style.display = '')
}
</script>

<div class="gallery-filtr">
<a href="#" onclick="return toggleImages2();">Показать все</a>
<a href="#" onclick="return toggleImages(2016);">2016</a>
<a href="#" onclick="return toggleImages(2017);">2017</a>
<a href="#" onclick="return toggleImages(2018);">2018</a>
<a href="#" onclick="return toggleImages(2019);">2019</a>
</div>

<div class="photos">

<a title="" href="assets/galleries/1.jpg">
<img src="assets/galleries/1min.jpg" alt="2016" title="" />
</a>
<a title="" href="assets/galleries/2.jpg">
<img src="assets/galleries/2min.jpg" alt="2016" title="" />
</a>
<a title="" href="assets/galleries/3.jpg">
<img src="assets/galleries/3min.jpg" alt="2017" title="" />
</a>
<a title="" href="assets/galleries/4.jpg">
<img src="assets/galleries/4min.jpg" alt="2017" title="" />
</a>
<a title="" href="assets/galleries/5.jpg">
<img src="assets/galleries/5min.jpg" alt="2017" title="" />
</a>
<a title="" href="assets/galleries/6.jpg">
<img src="assets/galleries/6min.jpg" alt="2018" title="" />
</a>
<a title="" href="assets/galleries/7.jpg">
<img src="assets/galleries/7min.jpg" alt="2018" title="" />
</a>
<a title="" href="assets/galleries/8.jpg">
<img src="assets/galleries/8min.jpg" alt="2019" title="" />
</a>
<a title="" href="assets/galleries/9.jpg">
<img src="assets/galleries/9min.jpg" alt="2019" title="" />
</a>
<a title="" href="assets/galleries/10.jpg">
<img src="assets/galleries/10min.jpg" alt="2019" title="" />
</a>
<a title="" href="assets/galleries/11.jpg">
<img src="assets/galleries/11min.jpg" alt="2019" title="" />
</a>
<a title="" href="assets/galleries/12.jpg">
<img src="assets/galleries/12min.jpg" alt="2019" title="" />
</a> 

</div>

Answer 2

[Simkav]

document.querySelectorAll("img[alt=2016]")
mdn
Дальше думаю разберетесь

Comments

[risorf]

function toggleImages (alt) {
var photos = document.querySelector('.photos');
photos.querySelectorAll('a').forEach(a => a.style.display = 'none')
photos.querySelectorAll(`img[alt="${alt}"]`).forEach(a => a.style.display = '')
}

подскажите, не получается отобразить картинку , которая в ссылке находится
т.е. строка - photos.querySelectorAll(`img[alt="${alt}"]`).forEach(a => a.style.display = '')
мне нужно сравнить по альту, а далее отобразить ссылку вместе с картинкой.
это никак не получается.