Показать несколько div

Question

Итак, я работаю над проектом, который имеет 2 таблицы в базе данных, которые связаны между собой!

Мне нужно с помощью JavaScript Скрыть и показать элементы, содержащие правильную информацию.

Я получилосновной продукт Камень , и каждый Камень имеет 2 других Типа Камня

Так что, если я нажму на изображение с Камень1, я хочу показать Stone1.1 , Stone1.2 , и т.д. и скрыть все остальные StoneTypes .

Это то, что я получил сейчас на JS

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

Проблема здесь в том, что я показываю только первый div, хотя у меня есть 2 div с тем же Name пример:

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

И {IdPedra} Идентификатор камня в базе данных, поэтому я получу "div1" два или 3 раза и т. д.

Может кто-нибудь, пожалуйста, помогите мнеЯ не могу найти подходящее решение для своих нужд.

Спасибо!

Answer 1

Вы можете использовать атрибуты данных для достижения этой цели.При изменении моего кода на;

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

Вы можете получить доступ к атрибуту данных элемента, используя $ (element) .data ("name");это эквивалентно data-name.Я также сохранил цикл Pedras

через SubPedras и проверил, соответствуют ли они кнопке, где родительская категория или значение вы хотите использовать в качестве фильтра.Запустите фрагмент, спасибо!

(Вы также можете сохранить их в атрибуте класса вместо данных)

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>