根据所选类别显示/隐藏特定项目/元素

时间：2018-02-01 11:20:24

标签： javascript html

我在div中有几个图像。每个图像属于一个类别。我想在选择该类别/组时显示只有一个类别的图像，并隐藏所有其他图像。

所以我在all类别的开头有几张图片，如果选择blue我只想要蓝色类别的图片。

我认为有必要创建一个包含所有图像的对象数组，并为它们提供一个类别。然后在类别编号上显示if/else。最后我找不到想要的结果。你能帮我吗？

这是JSFiddle。

const img1 = `<img class="img" src="https://encrypted-tbn0.gstatic.com/images?q=tbn:ANd9GcRTn1if-yc-9w3onZhlF9j7eOJEbbH7NY9QoQ0wyuAy33WoH-ml" alt="blue">`;
const img2 = `<img class="img" src="https://encrypted-tbn0.gstatic.com/images?q=tbn:ANd9GcQFjKqjM52gBUsAisUgVSuGrPMi2kgcZ8lv7DfsiZuYx8KCjCSf" alt="red">`;
const img3 = `<img class="img" src="https://encrypted-tbn0.gstatic.com/images?q=tbn:ANd9GcTuotUTsRgW-MMvhKc1ZwyDQoamkTut4u-V0_h0bCbxAWMl36A9Xg" alt="red">`
const img4 = `<img class="img" src="https://c1.staticflickr.com/4/3823/11294769684_5d4b0d1a23_n.jpg" alt="red">`;
const img5 = `<img class="img" src="https://encrypted-tbn0.gstatic.com/images?q=tbn:ANd9GcTnccHtrN6iwkll-kIreBtv9jTM831XY2-wRvtevpb8ApCtdC27" alt="blue">`;

const color = [
	{img1, category: [0, 1]},
  {img2, category: [0, 2]},
  {img3, category: [0, 2]},
  {img4, category: [0, 2]},
  {img5, category: [0, 1]}
]
//category 1 = all, 2 = bleu and 3 = red.

function showImg(number) {

}
.link__color {
  margin: 10px;
  font-size: 24px;
}

.contain {
  display: flex;
  flex-wrap: wrap;
}

.contain__img {
  margin: 15px;
}

.img {
  width: 200px;
  height: 150px;
}
<div class="link">
  <a onclik="showImg()" class="link__color" href="#">All</a>
  <a onclik="showImg()" class="link__color" href="#">Blue</a>
  <a onclik="showImg()" class="link__color" href="#">Red</a>
</div>

<div class="contain">
  <div class="contain__img">
    <img class="img" src="https://encrypted-tbn0.gstatic.com/images?q=tbn:ANd9GcRTn1if-yc-9w3onZhlF9j7eOJEbbH7NY9QoQ0wyuAy33WoH-ml" alt="blue">
  </div>
  
  <div class="contain__img">
    <img class="img" src="https://encrypted-tbn0.gstatic.com/images?q=tbn:ANd9GcQFjKqjM52gBUsAisUgVSuGrPMi2kgcZ8lv7DfsiZuYx8KCjCSf" alt="red">
  </div>
  
  <div class="contain__img">
    <img class="img" src="https://encrypted-tbn0.gstatic.com/images?q=tbn:ANd9GcTuotUTsRgW-MMvhKc1ZwyDQoamkTut4u-V0_h0bCbxAWMl36A9Xg" alt="red">
  </div>
  
  <div class="contain__img">
    <img class="img" src="https://c1.staticflickr.com/4/3823/11294769684_5d4b0d1a23_n.jpg" alt="red">
  </div>
  
  <div class="contain__img">
    <img class="img" src="https://encrypted-tbn0.gstatic.com/images?q=tbn:ANd9GcTnccHtrN6iwkll-kIreBtv9jTM831XY2-wRvtevpb8ApCtdC27" alt="blue">
  </div>
</div>

2 个答案:

答案 0 :(得分：1)

无需创建任何类别即可使用。只需将图像类型放在图像的 alt 属性中即可。

function showImg(category) {
var elements = document.querySelectorAll('.img');
  elements.forEach(function(el){
    if(category=='all')el.parentNode.style.display='inline';
    else if(el.getAttribute('alt')==category)el.parentNode.style.display='inline';
    else el.parentNode.style.display='none';
  });
}
.link__color {
  margin: 10px;
  font-size: 24px;
}

.contain {
  display: flex;
  flex-wrap: wrap;
}

.contain__img {
  margin: 15px;
}

.img {
  width: 200px;
  height: 150px;
}
<div class="link">
  <a onclick="showImg('all')" class="link__color" href="#">All</a>
  <a onclick="showImg('blue')" class="link__color" href="#">Blue</a>
  <a onclick="showImg('red')" class="link__color" href="#">Red</a>
</div>

<div class="contain">
  <div class="contain__img">
    <img class="img" src="https://encrypted-tbn0.gstatic.com/images?q=tbn:ANd9GcRTn1if-yc-9w3onZhlF9j7eOJEbbH7NY9QoQ0wyuAy33WoH-ml" alt="blue" >
  </div>
  
  <div class="contain__img">
    <img class="img" src="https://encrypted-tbn0.gstatic.com/images?q=tbn:ANd9GcQFjKqjM52gBUsAisUgVSuGrPMi2kgcZ8lv7DfsiZuYx8KCjCSf" alt="red">
  </div>
  
  <div class="contain__img">
    <img class="img" src="https://encrypted-tbn0.gstatic.com/images?q=tbn:ANd9GcTuotUTsRgW-MMvhKc1ZwyDQoamkTut4u-V0_h0bCbxAWMl36A9Xg" alt="red">
  </div>
  
  <div class="contain__img">
    <img class="img" src="https://c1.staticflickr.com/4/3823/11294769684_5d4b0d1a23_n.jpg" alt="red">
  </div>
  
  <div class="contain__img">
    <img class="img" src="https://encrypted-tbn0.gstatic.com/images?q=tbn:ANd9GcTnccHtrN6iwkll-kIreBtv9jTM831XY2-wRvtevpb8ApCtdC27" alt="blue">
  </div>
</div>

答案 1 :(得分：1)

我不确定你为什么要创建一个常量变量并再次分配它。简单。为蓝色和红色图像应用通用类。尝试根据您应用的类定位div。请看下面的HTML和Jquery。我已为相应的图像应用了blue和red类，并将其作为目标。

<强> HTML 

<div class="link" id="mainLink">
  <a id="all" class="link__color" href="#">All</a>
  <a id="blue" class="link__color" href="#">Blue</a>
  <a id="red" class="link__color" href="#">Red</a>
</div>

<div class="contain">
  <div class="contain__img blue">
    <img class="img" src="https://encrypted-tbn0.gstatic.com/images?q=tbn:ANd9GcRTn1if-yc-9w3onZhlF9j7eOJEbbH7NY9QoQ0wyuAy33WoH-ml" alt="blue">
 </div>

 <div class="contain__img red">
    <img class="img" src="https://encrypted-tbn0.gstatic.com/images?q=tbn:ANd9GcQFjKqjM52gBUsAisUgVSuGrPMi2kgcZ8lv7DfsiZuYx8KCjCSf" alt="red">
 </div>

 <div class="contain__img red">
    <img class="img" src="https://encrypted-tbn0.gstatic.com/images?q=tbn:ANd9GcTuotUTsRgW-MMvhKc1ZwyDQoamkTut4u-V0_h0bCbxAWMl36A9Xg" alt="red">
 </div>

 <div class="contain__img red">
    <img class="img" src="https://c1.staticflickr.com/4/3823/11294769684_5d4b0d1a23_n.jpg" alt="red">
 </div>

 <div class="contain__img blue">
    <img class="img" src="https://encrypted-tbn0.gstatic.com/images?q=tbn:ANd9GcTnccHtrN6iwkll-kIreBtv9jTM831XY2-wRvtevpb8ApCtdC27" alt="blue">
 </div>
</div>

<强> JQUERY 

$('#mainLink a').on('click', function(){
 var cls = $(this).prop('id');
 if(cls == 'all') {
   $(".contain__img").show();
 } else {
 $(".contain__img").hide();
   $("."+cls).show();
 }
});

<强>段 

$('#mainLink a').on('click', function(){
   var cls = $(this).prop('id');
   if(cls == 'all') {
     $(".contain__img").show();
   } else {
     $(".contain__img").hide();
    $("."+cls).show();
   }
});
.link__color {
  margin: 10px;
  font-size: 24px;
}

.contain {
  display: flex;
  flex-wrap: wrap;
}

.contain__img {
  margin: 15px;
}

.img {
  width: 200px;
  height: 150px;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="link" id="mainLink">
  <a id="all" class="link__color" href="#">All</a>
  <a id="blue" class="link__color" href="#">Blue</a>
  <a id="red" class="link__color" href="#">Red</a>
</div>

<div class="contain">
  <div class="contain__img blue">
    <img class="img" src="https://encrypted-tbn0.gstatic.com/images?q=tbn:ANd9GcRTn1if-yc-9w3onZhlF9j7eOJEbbH7NY9QoQ0wyuAy33WoH-ml" alt="blue">
  </div>
  
  <div class="contain__img red">
    <img class="img" src="https://encrypted-tbn0.gstatic.com/images?q=tbn:ANd9GcQFjKqjM52gBUsAisUgVSuGrPMi2kgcZ8lv7DfsiZuYx8KCjCSf" alt="red">
  </div>
  
  <div class="contain__img red">
    <img class="img" src="https://encrypted-tbn0.gstatic.com/images?q=tbn:ANd9GcTuotUTsRgW-MMvhKc1ZwyDQoamkTut4u-V0_h0bCbxAWMl36A9Xg" alt="red">
  </div>
  
  <div class="contain__img red">
    <img class="img" src="https://c1.staticflickr.com/4/3823/11294769684_5d4b0d1a23_n.jpg" alt="red">
  </div>
  
  <div class="contain__img blue">
    <img class="img" src="https://encrypted-tbn0.gstatic.com/images?q=tbn:ANd9GcTnccHtrN6iwkll-kIreBtv9jTM831XY2-wRvtevpb8ApCtdC27" alt="blue">
  </div>
</div>

相关问题
最新问题