Как связать элементы с помощью data-атрибута?

Question

[Николай Добрынин]

Есть элементы:

<li class="with-icon open-category" data-id="1">
Блок 1
</li>
<li class="with-icon open-category" data-id="2">
блок 2
</li>
<div data-id="1" id="second"  class="d-none">
content 1
</div>
<div data-id="2" id="second" class="d-none">
content 2
</div>

Оба блока скрыты, чтобы показать их использую простой скрипт:

$(document).ready(function(){


 $(".open-category").on('click',function(){ 
 $("#second").toggleClass("active");
      
   
 })

});

Но он открывает все блоки, что в принципе очевидно, не понимаю как запилить проверку на одинаковость data-id.

Answer 1

[0xD34F]

$('.open-category').click(function() {
  $(`.d-none[data-id="${this.dataset.id}"]`).toggleClass('active');
});

или

for (const n of document.getElementsByClassName('open-category')) {
  n.addEventListener('click', onClick);
}

function onClick({ target: { dataset: { id } } }) {
  document.querySelector(`.d-none[data-id="${id}"]`).classList.toggle('active');
}

или

const elements = new Map(Array.from(
  document.querySelectorAll('.open-category'),
  n => [ n, document.querySelector(`.d-none[data-id="${n.dataset.id}"]`) ]
));

document.addEventListener('click', e => {
  elements.get(e.target)?.classList.toggle('active');
});

Comments

[Николай Добрынин]

К сожалению, все равно active добавляется ко всем элементам с классом d-none

[0xD34F]

Серьёзно? Затрудняетесь правильно скопипастить готовый код? Старайтесь лучше.

[Mesuti]

Николай,
Решение от @0xD34F

[Николай Добрынин]

0xD34F, в том то и дело что он не работает, возможно это связано с тем, что id подставляются динамически.

[0xD34F]

Ну а у меня всё работает. Потрудитесь доказать свои слова - воспроизведите "не работает" в песочнице.

[Николай Добрынин]

Все вопрос решен мой косяк спасибо большое