Как связать элементы с помощью 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]

О каком data-атрибуте идёт речь:

const key = 'id';
const attr = `data-${key}`;

Как из элемента достать значение data-атрибута:

const getVal = el => $(el).data(key);
// или
const getVal = el => $(el).attr(attr);
// или
const getVal = el => el.dataset[key];
// или
const getVal = el => el.getAttribute(attr);
// или
const getVal = el => el.attributes[attr].value;

По кому кликаем, кому и какой класс надо переключать:

const buttonSelector = '.open-category';
const contentSelector = button => `.d-none[${attr}="${getVal(button)}"]`;
const activeClass = 'active';

Как переключить класс:

const toggle = button => $(contentSelector(button)).toggleClass(activeClass);

// или

const toggle = button => document
  .querySelector(contentSelector(button))
  .classList
  .toggle(activeClass);

Клики можно слушать непосредственно на кнопках:

$(buttonSelector).click(function() {
  toggle(this);
});

// или

document.querySelectorAll(buttonSelector).forEach(function(n) {
  n.addEventListener('click', this);
}, e => toggle(e.currentTarget));

Или на ком-нибудь из их общих предков:

$(document).on('click', buttonSelector, e => toggle(e.currentTarget));

// или

document.addEventListener('click', ({ target: t }) =>
  (t = t.closest(buttonSelector)) && toggle(t)
);

Comments

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

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

[0xD34F]

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

[Mesuti]

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

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

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

[0xD34F]

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

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

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