Форум программистов, компьютерный форум, киберфорум
JavaScript
Войти
Регистрация
Восстановить пароль
Блоги Сообщество Поиск Заказать работу  
 
Рейтинг 4.91/11: Рейтинг темы: голосов - 11, средняя оценка - 4.91
0 / 0 / 0
Регистрация: 24.11.2015
Сообщений: 30

Выбор элемента по атрибуту data-number, код есть, не могу понять почему не работает как нужно!

06.12.2017, 20:10. Показов 2288. Ответов 6
Метки нет (Все метки)

Студворк — интернет-сервис помощи студентам
Всем привет! Товарищи, помогите, столкнулся с проблемой.
У меня есть map в котором лежат area, у которых уникальный атрибут data-number, для первого area он =1, для второго =2 и т.д.

Мне нужно определить, какой area был нажат по данному атрибуту, после чего запустить switсh(dNum), где dNum это номер этого атрибута, зависимо от номера в модальное окно на страничке выводится информация из файла с объектами.
Код где должен быть вывод инфы
HTML5
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
    <a href="#openModal">Открыть модалку</a>
 
    <div id="openModal" class="modalDialog">
        <div>
            <a href="#close" title="Закрыть" class="close">X</a>
            <div class="wrapper">
                <h2 align="center" id="title">Фото квартиры</h2>
                <div class="slick-codepen">
                    <div>
                        <img src="images/kv_1_1.jpg" />
                    </div>
 
                    <div>
                        <img src="images/kv_1_2.jpg" />
                    </div>
 
                    <div>
                        <img src="images/kv_1_3.jpg" />
                    </div>
 
                    <div>
                        <img src="images/kv_1_4.jpg" />
                    </div>
 
                </div>
            </div>
            <h2 id="house-title"></h2>
 
            <p id="house-descr"></p>
            <p id="house-size"></p>
            <p id="house-rooms"></p>
        </div>
Код куска карты
HTML5
1
2
3
4
5
6
7
8
 <map name="Map" id="map">
        <area data-maphilight="{&quot;strokeColor&quot;:&quot;ffffff&quot;,&quot;strokeWidth&quot;:2,&quot;fillColor&quot;:&quot;30a654&quot;,&quot;fillOpacity&quot;:0.45,&quot;alwaysOn&quot;: true}"
              id="number1" onclick="ModalView();" class="prevent-scroll" data-number="1" alt="" title="Квартира 1(1A)" data-buy="free" shape="poly" coords="115,510,313,507,313,689,209,689,208,656,97,656,98,554,115,551" />
        <area data-maphilight="{&quot;strokeColor&quot;:&quot;ffffff&quot;,&quot;strokeWidth&quot;:2,&quot;fillColor&quot;:&quot;f44e52&quot;,&quot;fillOpacity&quot;:0.45,&quot;alwaysOn&quot;: true}"
              id="number2" onclick="ModalView();" class="prevent-scroll" data-number="2" alt="" title="Квартира 2(1Б)" data-buy="reserved" href="#" shape="poly" coords="203,240,114,239,114,504,224,502,224,459,319,459,318,405,290,401,290,367,204,365" />
        <area data-maphilight="{&quot;strokeColor&quot;:&quot;ffffff&quot;,&quot;strokeWidth&quot;:2,&quot;fillColor&quot;:&quot;30a654&quot;,&quot;fillOpacity&quot;:0.45,&quot;alwaysOn&quot;: true}"
              onclick="ModalView();" class="prevent-scroll" data-number="3" alt="" title="Квартира 3(1В)" data-buy="reserved" href="#" shape="poly" coords="382,460,380,204,280,202,280,241,209,245,208,362,295,362,295,399,330,397,333,459" />
          </map>
Код самого скрипта
JavaScript
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
function ModalView (dNum) {
    // var X = $("#map > area").each( function( index, element) {
    //     console.log( "N", index, "   id:", $( element).attr( "id"));
    // });
    var dNum = $('area').attr('data-number');
    var full = JSON.stringify('dataNumber'+dNum);
    var fullDNum = JSON.parse(full);
    switch (dNum) {
        case '1':
            console.log(dNum);
            console.log(fullDNum);
            $('#house-title').text(dataNumber1.title);
            $('#house-descr').text('Описание: ' + dataNumber1.description);
            $('#house-size').text('Размер квартиры: ' + dataNumber1.size);
            $('#house-rooms').text('Количество комнат: ' + dataNumber1.rooms);
            break;
 
        case '2':
            console.log(fullDNum);
            $('#house-title').text(dataNumber2.title);
            $('#house-descr').text('Описание: ' + dataNumber2.description);
            $('#house-size').text('Размер квартиры: ' + dataNumber2.size);
            $('#house-rooms').text('Количество комнат: ' + dataNumber2.rooms);
            break;
 
        case '3':
            alert(dataNumber3.title);
            $('#house-title').text(dataNumber3.title);
            $('#house-descr').text('Описание: ' + dataNumber3.description);
            $('#house-size').text('Размер квартиры: ' + dataNumber3.size);
            $('#house-rooms').text('Количество комнат: ' + dataNumber3.rooms);
            break;
 
        default:
            alert('Неизвестное значение: ');
            break;
    }
}
Код файла объектов
JavaScript
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
var dataNumber1 = {
    title: "Название квартиры 1",
    description: "Lorem ipsum dolor sit amet, consectetur adipiscing elit. Vestibulum sed tincidunt arcu. Aliquam dolor\n" +
    "erat, interdum ac est eget, volutpat auctor quam. Nam at gravida sem, nec laoreet massa. Praesent ut\n" +
    "tincidunt lacus.",
    size: 192,
    rooms: 4,
    sales: "В продаже"
};
 
var dataNumber2 = {
    title: "Название квартиры 2",
    description: "Описание квартирі Lorem ipsum dolor sit amet, consectetur adipiscing elit. Vestibulum sed tincidunt arcu. Aliquam dolor\n" +
    "erat, interdum ac est eget, volutpat auctor quam. Nam at gravida sem, nec laoreet massa. Praesent ut\n" +
    "tincidunt lacus.",
    size: 122,
    rooms: 3,
    sales: "Продано"
};
 
var dataNumber3 = {
    title: "Название квартиры 3",
    description: "Описание квартирі Lorem ipsum dolor sit amet, consectetur adipiscing elit. Vestibulum sed tincidunt arcu. Aliquam dolor\n" +
    "erat, interdum ac est eget, volutpat auctor quam. Nam at gravida sem, nec laoreet massa. Praesent ut\n" +
    "tincidunt lacus.",
    size: 158,
    rooms: 3,
    sales: "В продаже"
};
0
Лучшие ответы (1)
cpp_developer
Эксперт
20123 / 5690 / 1417
Регистрация: 09.04.2010
Сообщений: 22,546
Блог
06.12.2017, 20:10
Ответы с готовыми решениями:

Не могу понять почему код не работает так, как нужно. При выводе weight не выполняется функция void eat(float how_much)
#include &lt;iostream&gt; #include &lt;string&gt; using namespace std; class Worker { private: float weight; public: void a(int...

Есть код на паскале, нужно понять, как он работает
я не могу понять алгоритм программы разбиение числа n на k слагаемых например, нужно разбить число 17 на 10 слагаемых, так, чтобы...

Не могу понять почему не работает код
Вот задача https://sochisirius.ru/uploads/files2/Ochniy_otbor.pdf название E. Международная олимпиада Вот код: def...

6
Юзер с абсолютным слухом
 Аватар для Опан
709 / 489 / 195
Регистрация: 17.12.2010
Сообщений: 1,428
06.12.2017, 21:28
Можно так: в каждом <area> прописать onclick="ModalView(this.dataset.number); ", а 5-ю строку в коде самого скрипта убрать.
0
0 / 0 / 0
Регистрация: 24.11.2015
Сообщений: 30
06.12.2017, 21:55  [ТС]
Опан, в принципе я нашел решение)
Но интересно есть ли какие интересные методы еще?
0
Юзер с абсолютным слухом
 Аватар для Опан
709 / 489 / 195
Регистрация: 17.12.2010
Сообщений: 1,428
06.12.2017, 22:19
Ещё в функцию можно передавать id того <area>, по которому кликнули: onclick="ModalView(this.id);" Если с помощью id нужно передать несколько параметров, их можно написать через разделительный спецсимвол, а потом с помощью метода split(); получить коллекцию параметров:
HTML5
1
<area id="para1&para2&para3" onclick="a=this.id.split('&');alert(a[0];alert(a[1];alert(a[2])">
Я так делал, пока не знал об атрибутах data-...
1
0 / 0 / 0
Регистрация: 24.11.2015
Сообщений: 30
06.12.2017, 22:37  [ТС]
Опан, спасибо за вариант
0
707 / 309 / 191
Регистрация: 05.03.2015
Сообщений: 822
07.12.2017, 02:25
Лучший ответ Сообщение было отмечено Kha787 как решение

Решение

Вариант с айди ужасный. Оптимальный вариант с дата аттрибутом. Для понимания простой пример:
HTML5
1
2
3
4
5
<div data-id="1">test</div>
<div data-id="2">test</div>
<div data-id="3">test</div>
<div data-id="4">test</div>
<div data-id="5">test</div>
JavaScript
1
2
3
$('div').on('click', function(){
            console.log($(this).data('id'))
})
Добавлено через 8 минут
Один из адекватных вариантов решения: https://codepen.io/msheal/pen/gXJeJZ
1
0 / 0 / 0
Регистрация: 24.11.2015
Сообщений: 30
11.12.2017, 12:56  [ТС]
msheal, Спасибо, хороший вариант! Благодарен вам!
0
Надоела реклама? Зарегистрируйтесь и она исчезнет полностью.
raxper
Эксперт
30234 / 6612 / 1498
Регистрация: 28.12.2010
Сообщений: 21,154
Блог
11.12.2017, 12:56
Помогаю со студенческими работами здесь

Не могу понять почему код не работает
Здравствуйте! Было дано задание: Напишите функцию, которая - называется IsPalindrom - возвращает bool - принимает параметр...

Не работает, код, не могу понять почему
Очень нужно, срочно, но не могу найти ошибку! Unit Matrix; interface uses Windows, Messages, SysUtils, Classes,...

не могу понять почему не работает мой код
#include&lt;iostream&gt; #include&quot;cstring&quot; using namespace std; struct Spisok { char nameProduct; char count; char price; ...


Искать еще темы с ответами

Или воспользуйтесь поиском по форуму:
7
Ответ Создать тему
Новые блоги и статьи
SDL3 для Web (WebAssembly): Реализация движения на Box2D v3 - трение и коллизии с повёрнутыми стенами
8Observer8 20.02.2026
Содержание блога Box2D позволяет легко создать главного героя, который не проходит сквозь стены и перемещается с заданным трением о препятствия, которые можно располагать под углом, как верхнее. . .
Конвертировать закладки radiotray-ng в m3u-плейлист
damix 19.02.2026
Это можно сделать скриптом для PowerShell. Использование . \СonvertRadiotrayToM3U. ps1 <path_to_bookmarks. json> Рядом с файлом bookmarks. json появится файл bookmarks. m3u с результатом. # Check if. . .
Семь CDC на одном интерфейсе: 5 U[S]ARTов, 1 CAN и 1 SSI
Eddy_Em 18.02.2026
Постепенно допиливаю свою "многоинтерфейсную плату". Выглядит вот так: https:/ / www. cyberforum. ru/ blog_attachment. php?attachmentid=11617&stc=1&d=1771445347 Основана на STM32F303RBT6. На борту пять. . .
Камера Toupcam IUA500KMA
Eddy_Em 12.02.2026
Т. к. у всяких "хикроботов" слишком уж мелкий пиксель, для подсмотра в ESPriF они вообще плохо годятся: уже 14 величину можно рассмотреть еле-еле лишь на экспозициях под 3 секунды (а то и больше),. . .
И ясному Солнцу
zbw 12.02.2026
И ясному Солнцу, и светлой Луне. В мире покоя нет и люди не могут жить в тишине. А жить им немного лет.
«Знание-Сила»
zbw 12.02.2026
«Знание-Сила» «Время-Деньги» «Деньги -Пуля»
SDL3 для Web (WebAssembly): Подключение Box2D v3, физика и отрисовка коллайдеров
8Observer8 12.02.2026
Содержание блога Box2D - это библиотека для 2D физики для анимаций и игр. С её помощью можно определять были ли коллизии между конкретными объектами и вызывать обработчики событий столкновения. . . .
SDL3 для Web (WebAssembly): Загрузка PNG с прозрачным фоном с помощью SDL_LoadPNG (без SDL3_image)
8Observer8 11.02.2026
Содержание блога Библиотека SDL3 содержит встроенные инструменты для базовой работы с изображениями - без использования библиотеки SDL3_image. Пошагово создадим проект для загрузки изображения. . .
КиберФорум - форум программистов, компьютерный форум, программирование
Powered by vBulletin
Copyright ©2000 - 2026, CyberForum.ru