JSFiddle - React, Tailwind, and code Playground

by thomas_david88

HTML

<select id="ddlViewBy">
  <option value="1">all</option>
  <option value="1">image</option>
  <option value="2">video</option>
  <option value="3">pdf</option>
</select>
<div class="full-image" data-id="2" data-image="jpg">aa<img src="" />
</div>
<div class="full-image" data-id="3" data-image="png">bb<img src="" />
</div>
<div class="full-image" data-id="4" data-image="jpg">cc<img src="" />
</div>
<div class="full-image" data-id="5" data-image="jpg mp4">dd<img src="" />
</div>
<div class="full-image" data-id="5" data-image="mp4,jpg">yy<img src="" />
</div>
<div class="full-image" data-id="6" data-image="gif">oo<img src="" />
</div>
<div class="full-image" data-id="7" data-image="pdf">cc<img src="" />
</div>

CSS

.show {
  display: block;
}

.hidden {
  display: none;
}

JavaScript

});
var ext = ["jpg", "gif", "png", "jpeg"];
const extvideo = ["mp4", "ogv"];
const extpdf = ["pdf"];
      length =ext.length;
$("#ddlViewBy").on("change", function(e) {
  var name = $("#ddlViewBy option:selected").text();
  const divs = document.querySelectorAll('.full-image');
  divs.forEach(div => {
    div.classList.remove('hidden');
  });
  if (name == "image") {
    divs.forEach(div => {
 
      while(length--) {
   if (div.dataset['image'].indexOf(ext[length])!=-1) {
       console.log("hello");
       div.classList.add("show");
   }
   

}

    });
  }
  if (name == "video") {
    divs.forEach(div => {
      const className = extvideo.includes(div.dataset['image']) ? "show" : "hidden";
      div.classList.add(className);
    });
  }
  if (name == "pdf") {
    divs.forEach(div => {
      const className = extpdf.includes(div.dataset['image']) ? "show" : "hidden";
      div.classList.add(className);
    });
  }
});