CODEWITHSUNDEEP
javascripthtml
mathiasF
mathiasF

Reputation: 267

Show/Hide Specific Items/Elements based on selected Category

I have couple images inside a div. Each image belongs to a category. I would like to show images of only a single category when that category/group is selected and hide all other images.

So I have several images at the beginning in the category all and if choose blue I only want the images in blue category.

I thought it was necessary to create an object array containing all the images and give them a category. Then with an if/else play on the category number to display. In the end I can't find the desired result. Can you help me, please?

Here is the 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>

Upvotes: 0

Views: 201

Answers (2)

Munim Munna
Munim Munna

Reputation: 17556

This works without creating any category. Just put the image type in alt attribute of the image.

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>

Upvotes: 1

Suresh Ponnukalai
Suresh Ponnukalai

Reputation: 13998

I am not sure why you want to create a constant variable and assign it again. Make it Simple. Apply common class for the blue and red images. Try to target the div based on the classes you applied. Look at the below HTML and Jquery. I have applied the blue and red classes for the respective images and target the same.

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();
 }
});

SNIPPET

$('#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>

Upvotes: 1

Related Questions