Как сделать так, чтобы при наведении на отдельную квартиру (path) менялся стиль ссылки, соответствующей этой квартире?

Question

[Клим Куликов]

Сейчас код выглядит так, как указано внизу. Нужно, чтобы при наведении на квартиру менялись стили у ссылки, которая соответствует этой квартире, и наоборот, при наведении на ссылку подсвечивалась квартира

var currentFlat = 40;
 var flatPath = $('.modal--img path');

flatPath.on('mouseover', function() {
        flatPath.removeClass('currentFlat');
        currentFlat = $(this).attr('data-flat');
        $('.flat--link').attr('style', 'color: #3596F5; text-decoration: underline;');

Comments

[Максим]

Надо добавить какой то класс а не атрибут

[Клим Куликов]

Brasileiro, так я добавил атрибут data-flat и в нём указал номера квартир

[Клим Куликов]

Клим Куликов,

<svg class="flats" width="433" height="408" viewBox="0 0 433 408" fill="none" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink">
                    <image id="image0" width="433" height="408" xlink:href="/img/floor.png"/>
                    <path data-flat="40" d="M388 81V141H314V148H267.5V131H247V32.5H338.5V16H405V81H388Z" fill="#3595F6" fill-opacity="0.75"/>
                    <path data-flat="41" d="M314 148.5H268V200H367.5V205H387.5V141H314V148.5Z" fill="#3595F6" fill-opacity="0.75"/>
                    <path data-flat="42" d="M314.192 252.662H268V200H367.916V204.602H388V268H314.192V252.662Z" fill="#3595F6" fill-opacity="0.75"/>
                    <path data-flat="43" d="M314 253H268.5V309H295.5V376H340V393H405V328.5H388V268.5H314V253Z" fill="#3595F6" fill-opacity="0.75"/>
                    <path data-flat="44" d="M218 394.5V264H247.5V273.5H267.5V310.5H294.5V375H259.5V394.5H218Z" fill="#3595F6" fill-opacity="0.75"/>
                    <path data-flat="45" d="M217 394.5V264H187.5V273.5H167.5V310.5H140.5V375H175.5V394.5H217Z" fill="#3595F6" fill-opacity="0.75"/>
                    <path data-flat="46" d="M121 252H166.5V309H139.5V376H95V393H30V328.5H47V273.5H121V252Z" fill="#3595F6" fill-opacity="0.75"/>
                    <path data-flat="47" d="M119.5 273.5H46V198H167V250.822H119.5V273.5Z" fill="#3595F6" fill-opacity="0.75"/>
                    <path data-flat="48" d="M124.729 116H46V198H167V145.178H124.729V116Z" fill="#3595F6" fill-opacity="0.75"/>
                    <path data-flat="49" d="M46.5 81V115.5H125V144.5H164V131H184.5V32.5H93V16H28V81H46.5Z" fill="#3595F6" fill-opacity="0.75"/>
                </svg>

Answer 1

[Сергей Соколов]

Из data-атрибута получать номер квартиры. По нему выбирать и path и элемент списка:

Подробнее.
Интересуют события, когда мышка наезжает на path или на элемент списка, и когда уезжает.

И у path и у элементов списка у каждого в дата-атрибуте data-flat записан номер квартиры.
Когда происходит событие, надо:

1. получить из data-атрибута номер квартиры
   
2. переключить класс active (включить или выключить его, в зависимости от типа события
   

Зная номер квартиры, можно выбрать элементы, у которых атрибут data-flat совпадает с этим номером. Для этого используется селектор [data-flat="42"]

Comments

[Клим Куликов]

спасибо, только я на jquery пишу

[Сергей Соколов]

Клим Куликов, ну, пишите на jQuery ) Принцип понятен?

[Клим Куликов]

Сергей Соколов, в теории понятен, но перенести на jquery не знаю, смогу ли, только начинаю его осваивать

[Сергей Соколов]

Клим Куликов, туго идёт и чистый JS и jQuery? Тогда зачем возиться с jQuery, когда вот решение, работающее без лишних библиотек.

Answer 2

[Kirito Kirigaya]

Я накидал готовый пример, посмотрите его.
Надеюсь это поможет!
CodePen