Почему при клике не получается отобразить картинку в ссылке?

Question

[risorf]

Не получается отобразить картинку, которая в ссылке находится.
Т.е., мне нужно сравнить по альту, а далее отобразить ссылку вместе с картинкой.

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

<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 class="photos">
<a title="" href="assets/galleries/1.jpg">
<img src="assets/galleries/1min.jpg" alt="2016" title="" />
</a>
<a title="" href="assets/galleries/4.jpg">
<img src="assets/galleries/4min.jpg" alt="2017" title="" />
</a>
<a title="" href="assets/galleries/6.jpg">
<img src="assets/galleries/6min.jpg" alt="2018" title="" />
</a>
</a>
<a title="" href="assets/galleries/9.jpg">
<img src="assets/galleries/9min.jpg" alt="2019" title="" />
</a> 
</div>

Answer 1

[0xD34F]

Прячете a, показывать пытаетесь img.

Перебираем картинки, получаем родительские ссылки, переключаем им видимость в зависимости от того, как alt картинки соотносится с переданным в функцию:

document.querySelectorAll('.photos img').forEach(n => {
  n.parentNode.style.display = +n.getAttribute('alt') === alt ? '' : 'none';

  // или

  n.parentElement.hidden = parseInt(n.attributes.alt.value) !== alt;

  // или (в стили надо будет добавить .hidden { display: none; })

  n.closest('a').classList.toggle('hidden', Number(n.alt) !== alt);
});

Comments

[risorf]

да спасибо, работает