0

Здраствуйте, у меня возникла проблема с реализацией такой идеи: введите сюда описание изображенияПо нажатию на этаж дома с помощью JS определяется цифра, которая отвечает за номер этажа и передается в другой блок div в span с классом 'num-floor', который скрыт до нажатия на любой из этажей или на кнопку в нижнем правом углу

function SetCounterToNumFloor()
{
    document.querySelector(".num-floor").textContent = counter.textContent
}

введите сюда описание изображения Так вот, проблема в том, что чтобы отобразить тут какие квартиры заняты, а какие нет, мне нужно проверить данные из БД, которые получены в шаблоне через views.py в таком виде (данные за все 179 квартир на всех этажах): введите сюда описание изображения Каким образом я могу получить номер этажа, который определен в JS, чтобы отсеять данные с БД и применить другой стиль к тексту справа, соответственно к полученным данным? Предлагайте Ваши решения или как можно это сделать иначе, буду всем безумно благодарен, ибо только учусь и нуждаюсь в Вашей помощи Подробнее ознакомиться можно по ссылке:

1 ответ 1

0

HTML Image Maps

const $map = document.querySelector(`map`);

$map.addEventListener(`click`, e => {
  e.preventDefault();
  console.log(e.target.alt);
});
<img src="https://www.w3schools.com/html/workplace.jpg" alt="Workplace" usemap="#workmap">

<map name="workmap">
  <area shape="rect" coords="34,44,270,350" alt="Computer" href="computer.htm">
  <area shape="rect" coords="290,172,333,250" alt="Phone" href="phone.htm">
  <area shape="circle" coords="337,300,44" alt="Coffee" href="coffee.htm">
</map>

Можете также использовать Mapper.js.

2
  • Можно какие-то комментарии к этому коду? Ибо у меня все основано на path и отслеживание нажатия на них. И все это одна страница сайта 6 сен 2021 в 20:11
  • @VladimirMaksymchuk исправил ответ.
    – nazarpunk
    6 сен 2021 в 20:45

Ваш ответ

By clicking “Отправить ответ”, you agree to our terms of service and acknowledge that you have read and understand our privacy policy and code of conduct.

Всё ещё ищете ответ? Посмотрите другие вопросы с метками или задайте свой вопрос.