каждый атрибут всех данных

Question

эй, я пытаюсь создать сортировку по картинке, документу, видео.У меня есть много div, который содержит расширение данных, поэтому моя идея взять все атрибуты содержит jpg, gif, png и я поставил видимым, а другой скрыть.Моя проблема, как для каждого нескольких атрибутов данных: это моя структура

<div class="full-image" data-id="2"  data-image="jpg"><img src=""/>
<div class="full-image" data-id="3"  data-image="png"><img src=""/>
<div class="full-image" data-id="4"  data-image="jpg"><img src=""/>
<div class="full-image" data-id="5"  data-image="mp4"><img src=""/>
<div class="full-image" data-id="6"  data-image="gif"><img src=""/>

Answer 1

цикл через div, используйте набор данных , чтобы проверить атрибут data-image и добавить соответствующий класс соответственно (скрытый или видимый):

const ext = ["jpg", "gif", "png"];

document.querySelectorAll('.full-image').forEach(div => {
  const className= ext.includes(div.dataset['image']) ? "visible" : "hide";
  
  div.classList.add(className);
});

.visible {
  visibility: visible;
}

.hide {
  visibility: hidden;
}

<div class="full-image" data-id="2"  data-image="jpg">1<img src=""/>
<div class="full-image" data-id="3"  data-image="png">2<img src=""/>
<div class="full-image" data-id="4"  data-image="jpg">3<img src=""/>
<div class="full-image" data-id="5"  data-image="mp4">4<img src=""/>
<div class="full-image" data-id="6"  data-image="gif">5<img src=""/>