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

Question

我在 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>

Answer 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>