Как по клику на объект определить к какой группе классов он принадлежит?

Question

[Mosapi]

На странице есть много объектов создающихся через for:

html = document.querySelector('body');
for(var i = 1; i <= 20; i++){
html.insertAdjacentHTML("beforeend", "<div class='data"+i+"'></div>");
}
...

https://jsfiddle.net/2t96wag8/2/
Необходимо по клику на любой из div определить, что в имени его класса есть слово data или par или ... и т.д. И дальше вывести алерт, что объект принадлежит соответствующему классу.
Без проблем регистрирую клик и получаю класс каждого нажатого объекта, но никак не могу понять, как определить принадлежность к тому или иному классу и вывести алерт.

Answer 1

[0xD34F]

Во-первых - вы не рассказали, зачем вам тут нужны именно классы. А значит - классы вам не нужны. Меняйте на data-атрибут. Например, type (data-type).

Во-вторых, как из элемента извлечь значение атрибута, а из значения атрибута убрать цифры:

const getTypeGroup = el => el.dataset.type.replace(/\d/g, '');

// или

const getTypeGroup = el => el.getAttribute('data-type').match(/\D+/)[0];

// или

const getTypeGroup = el => el.attributes['data-type'].value.split(/\d/).shift();

В третьих:

document.addEventListener('click', e => {
  const el = e.target.closest('[data-type]');
  if (el) {
    console.log(getTypeGroup(el));
  }
});

// или

document.querySelectorAll('[data-type]').forEach(function(n) {
  n.addEventListener('click', this);
}, e => console.log(getTypeGroup(e.currentTarget)));

Comments

[Mosapi]

Я бы тоже лучше использовал data-атрибут, но таково было задание. Все же, мне помогло ваше решение. Я совсем забыл что можно обрезать не нужное с помощью replace.
https://jsfiddle.net/sL0dkor8/

Answer 2

[dmitry-toster]

если я правильно понял задачу, то можно так
т.е:

const classes = ['data', 'par', 'opt'];
classes.some(c => block.includes(c));

Comments

[Mosapi]

К сожалению, это близко, но не то.