Как при нажатии на path из svg показать соответствующий ему div?

Question

[Евгений Леонов]

Я хочу, чтобы при нажатии на деталь машины (например, капот) открылся блок с категориями повреждений и стоимостью за ремонт именно этой детали (именно капота). Ну и соответственно, также с другими деталями.
Написал кусок кода, где проверяю элемент, по которому кликаю, на наличие нужного мне класса. Исходя из этого присваиваю класс и показываю нужный список с категориями ремонта.
И еще, как сделать, чтобы при клике на вторую деталь с первой детали убирать класс active?

Answer 1

[Евгений Леонов]

Решил задачу таким кодом.

const tabs = document.getElementById('tabs');
const content = document.querySelectorAll('.priceHome__priceDetail');
const tabsEl = Array.from(document.querySelectorAll('.group-el'));

const changeClass = el => {
for (let i = 0; i < tabs.children.length; i++) {
tabs.children[i].classList.remove('active');
}
el.classList.add('active');
}

for (index = 0; index < tabsEl.length; index++) {
tabsEl[index].addEventListener('click', (e) => {
const currTab = e.target.dataset.btn;
changeClass(e.target);
for (let i = 0; i < content.length; i++) {
content[i].classList.remove('active');
if (content[i].dataset.content === currTab) {
content[i].classList.add('active');
}
}
})
}

Answer 2

[Андрей Мартынкевич]

Я хочу, чтобы при нажатии на деталь машины (например, капот) открылся блок с категориями повреждений и стоимостью за ремонт именно этой детали (именно капота)

Если я правильно понял, то просто цена должна отличатся, если да, то для каждой запчасти создаешь атрибут data-price(Например) и уже в нем указывашь цену для каждой запчасти, а в js просто будешь перед открытием окна считывать цену с данного атрибута и менять ее в нужных местах.

как сделать, чтобы при клике на вторую деталь с первой детали убирать класс active?

Есть два варианта:
1. Можно взять родительский элемент и уже в нем попытся найти элемент с классом active, если null, то ничего не делать, а иначе убрать его, после добавить active на котором был клик.
2. Можно перед добавлением active для нужного элемента сначала всем элемнтам удалить данный класс.

Comments

[Евгений Леонов]

Андрей Мартынкевич с удалением класса у меня получилось, спасибо.
А по первому вопросу еще не нашел решение. Логику такую хочу применить:
Дано: Есть div (.carsHome__basicCar), в котором есть 2 div (.car-hovers - в нём общий svg с path деталями машины (деталей 6 шт.) и .priceHome - в нём 6 разных div, внутри которых разные категории повреждений будут и цены). Блок с категориями и ценами я просто убираю display:none или показываю display:block ниже картинки с машиной. Как при клике на деталь выделить деталь цветом и показывать блок с категориями я разобрался, работает код. А вот как при клике на деталь показать ИМЕННО НУЖНЫЙ блок с категориями и ценой, который соответствует нажатой детали (как связать их) не могу понять.
Задача:При нажатии на деталь машины показать нужный блок с категориями и ценой
Подскажи, пожалуйста, как настроить связь детали машины и блока с категориями для нее.

[Андрей Мартынкевич]

leotoleo, Можно например каждую деталь обернуть в тег a(Задать атрибут href="category-1" например) и при клике на нее считывать href и открывать меню с id который мы получили из href. P.s Также нужно после клика Event.preventDefault().
Надеюсь помог.

[Евгений Леонов]

Андрей Мартынкевич, не совсем разобрался, спасибо за подсказки. Решил вопрос вот таким кодом:
const tabs = document.getElementById('tabs');
const content = document.querySelectorAll('.priceHome__priceDetail');
const tabsEl = Array.from(document.querySelectorAll('.group-el'));

const changeClass = el => {
for (let i = 0; i < tabs.children.length; i++) {
tabs.children[i].classList.remove('active');
}
el.classList.add('active');
}

for (index = 0; index < tabsEl.length; index++) {
tabsEl[index].addEventListener('click', (e) => {
const currTab = e.target.dataset.btn;
changeClass(e.target);
for (let i = 0; i < content.length; i++) {
content[i].classList.remove('active');
if (content[i].dataset.content === currTab) {
content[i].classList.add('active');
}
}
})
}