时间戳

首页 > 解决方案 > 每个所有数据属性

javascript - 每个所有数据属性

问题描述

嘿，我正在尝试按图片、文档、视频创建排序。我有很多包含数据扩展的 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=""/>

标签： javascriptjquery

解决方案

循环遍历 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=""/>

推荐阅读