显示多个div

Question

so, I'm working on a project that has 2 tables in database that are related!

I need via JavaScript Hide and Show the divs containing the right information.

I got a main product Stone, and each Stone has 2 other Stone Types

So if I click on the img that has Stone1, I want to show Stone1.1, Stone1.2, etc and hide all the other StoneTypes.

This is what I got now on JS

jQuery('.Pedras').click(function(){
          jQuery('.SubPedras').hide();
          jQuery('#div'+$(this).attr('target')).show();
    });

The problem here is that I only get the first div to show, eventhough I have 2 divs with the same Name example:

<div id="div{IdPedra}" class="SubPedras">
<div id="div{IdPedra}" class="SubPedras">
<div id="div{IdPedra}" class="SubPedras">

And {IdPedra} Is the id of the stone in the database, so I will get "div1" two or 3 times, etc.

Can anyone pls help me, I'm not able to find a suitable solution for my need.

Thank you!

Answer 1

You could use data-attributes to accomplish this. In your change my code to;

<div data-id="{IdPedra}" class="SubPedras">Stone 1.1</div>
<div data-id="{IdPedra}" class="SubPedras">Stone 1.2</div>
<div data-id="{IdPedra}" class="SubPedras">Stone 2.1</div>
<div data-id="{IdPedra}" class="SubPedras">Stone 2.2</div>

You can access an element's data-attribute by using $(element).data("name"); this is equivalent to data-name. I also stored the Pedras

Loop through the SubPedras and check if they match the button where the parent category or value you wish to use as filter. Run the snippet, thanks!

(You could also store them to class attribute instead of data)

jQuery('.Pedras').click(function() {
  // store button value to variable
  var pedraValue = $(this).val();
  
  // loop through the SubPedras
  $(".SubPedras").each(function() {
    
    // get the value from data attribute
    if ($(this).data("id") == pedraValue) {
      
      // if match show
      $(this).show();
    }
    else{
      // else hide
      $(this).hide();
    }
  });
});

.SubPedras{
  line-height:40px;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div data-id="Stone1" class="SubPedras">Stone 1.1</div>
<div data-id="Stone1" class="SubPedras">Stone 1.2</div>
<div data-id="Stone2" class="SubPedras">Stone 2.1</div>
<div data-id="Stone2" class="SubPedras">Stone 2.2</div>

<button class="Pedras" value="Stone1">Stone 1</button>
<button class="Pedras" value="Stone2">Stone 2</button>

</div>