Добавление нескольких элементов в цикле

@Emmk · Регистрация: 12.02.2016

Студворк — интернет-сервис помощи студентам

Всем здарова. Такая тема - есть цикл на PHP, в котором дергаются данные из базы (координаты), далее в этом же цикле засунут ява скрипт код, который по задумке должен добавлять на карту стрелочки, положение которых вычисляется по оффсету относительно родительского элемента (контейнера с картой):

JavaScript
1
2
3
4
5
6
7
8
9
10
11
12
13
14
<script type="text/javascript">
       var img = document.createElement('img');
       img.className = "arrow";
       img.src = "/img/arrow.png";
 
      document.getElementById("container").appendChild(img);
 
      $(".arrow").load(function () {
             var MapX = document.getElementById('map').offsetLeft;
             var MapY = document.getElementById('map').offsetTop;
             $(this).offset({top:<?php echo $row->Y;?> + MapY - 64, left:<?php echo $row->X;?> + MapX - 32});
       });
                  
</script>

Данные дёргаются ровно, но вот точки на карте ставятся в одно место (последние из считанных координат), при этом в инспекторе видно, что в DOM-дереве у нас создалось нужное количество точек, но они все находятся не на своих координатах, а на координатах последней.

Гуглёжка показала, что якобы appendChild не создает второй элемент, а просто перемещает старый. Но инспектор показывает другое. В связи с чем я вообще ничего не понимаю

Как добавлять несколько точек на разных координатах?

Прошу сильно ногами не пинать, с ява скриптом мало практики имел. Заранее прошу прощения если не в тот раздел форума. Знаю что юзаю jQuery вместе с нативным JavaScript, может, подскажете как оптимизировать код?

@BANO · 26.06.2016, 23:28

Emmk, у вас весь этот js находится внутри php цикла?
покажите пожалуйста код php

@Emmk · 26.06.2016, 23:33 **[ТС]**

BANO, да, весь код внутри цикла PHP. Вот весь код:

PHP
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
<?php
     $room = $_GET['room'];
 
     if ($room == NULL) {
 
     } else {
          $sql = $pdo->prepare('SELECT build, floor, room, X, Y, description FROM map WHERE room = ?');
          $sql->execute([$_GET['room']]);
 
         while ($row = $sql->fetch(PDO::FETCH_LAZY)) 
         {
 
?> 
 
 
<script type="text/javascript">
       var img = document.createElement('img');
       img.className = "arrow";
       img.src = "/img/arrow.png";
 
      document.getElementById("container").appendChild(img);
 
      $(".arrow").load(function () {
             var MapX = document.getElementById('map').offsetLeft;
             var MapY = document.getElementById('map').offsetTop;
             $(this).offset({top:<?php echo $row->Y;?> + MapY - 64, left:<?php echo $row->X;?> + MapX - 32});
       });
                  
</script>
 
<?php }}
  
?>

Простите, код немного быдловат

Юзверь по задумке вводит в input в браузере адрес объекта и ему показывается, на карте, где тот может встречаться.

@BANO · 26.06.2016, 23:56

Emmk, я бы сделал по-другому

я бы предложил немного другой-подход
смотрите, сделать карту контейнером, в неё запихать статичные отметки (position: absolute) и спокойно прокручивать карту как душе угодно
вы php скриптом зафигачьте все данные в массив объектов
потом, просто можно пробежаться по этому массиву и поставить нужные координаты относительно "начала карты"

@Emmk · 27.06.2016, 00:04 **[ТС]**

BANO, тоже хороший вариант. Но мне хочется узнать что не так с appendChild? Есть ли способ на Ява Скрипте добить эту задачу или придется иную архитектуру придумывать?

@Fedor Vlasenko · 27.06.2016, 00:34

Сообщение от Emmk

что не так с appendChild

да с ним как раз все ок
закомментируйте строки внизу и увидите

Сообщение от Emmk

Есть ли способ на Ява Скрипте добить эту задачу или придется иную архитектуру придумыват

здесь не стоит js применять
достаточно html
подумайте про архитектуру и вывод. может сразу стоит подумать о шаблонизаторе

@Emmk · 27.06.2016, 13:34 **[ТС]**

Сообщение от Poznakomlus

здесь не стоит js применять
достаточно html
подумайте про архитектуру и вывод. может сразу стоит подумать о шаблонизаторе

Как в этом случае будет? На ум приходит только один вариант - натыкать везде где можно точек с display:none, и далее в PHP скрипте смотреть что прилетело и от этого нужную подсвечивать. Или еще как-то можно?

Добавлено через 11 минут
А еще это все черевато изращениями с z-index'ом, разве нет? Мне поэтому идея реализации на JS offset'ах больше понравилась. Да вот только в чем-то накосячилось. Я примерно понял, что раз у меня добавляется >1 элементов, то они все имеют одинаковое имя класса и поэтому все кучей оффсетяться в одну точку. Может быть можно плодить элементы в createElement с всегда разными именами класса?

Добавлено через 10 часов 53 минуты
Короче говоря, да, так все и оказалось. Элементы с одинаковым именем класса в дереве летали туда сюда. Проблему решил добавив в скрипт к месту создания номер иттерации PHP скрипта:

JavaScript
1
img.className = "arrow" + <?php echo $i; ?>;

Теперь элементы имеют уникальные имена и встают на свои места. Я фигею если честно с такого кода, поэтому Poznakomlus и BANO, спасибо за советы! Я буду думать над более изящной архитектурой приложения

Новые блоги и статьи Все статьи Все блоги /
Настройки VS Code Loafer 13.04.2026 { "cmake. configureOnOpen": false, "diffEditor. ignoreTrimWhitespace": true, "editor. guides. bracketPairs": "active", "extensions. ignoreRecommendations": true, . . .	Оптимизация кода на разграничение прав доступа к элементам формы Maks 13.04.2026 Алгоритм из решения ниже реализован на нетиповом документе, разработанного в конфигурации КА2. Задачи, как таковой, поставлено не было, проделанное ниже исключительно моя инициатива. Было так:. . .	Контроль заполнения и очистка дат в зависимости от значения перечислений Maks 12.04.2026 Алгоритм из решения ниже реализован на примере нетипового документа "ПланированиеПерсонала", разработанного в конфигурации КА2. Задача: реализовать контроль корректности заполнения дат назначения. . .	Архитектура слоя интернета для сервера-слоя. Hrethgir 11.04.2026 В продолжение https:/ / www. cyberforum. ru/ blogs/ 223907/ 10860. html Знаешь что я подумал? Раз мы все источники пишем в голове ветки, то ничего не мешает добавить в голову такой источник, который сам. . .
Подстановка значения реквизита справочника в табличную часть документа Maks 10.04.2026 Алгоритм из решения ниже реализован на примере нетипового документа "ПланированиеПерсонала", разработанного в конфигурации КА2. Задача: при выборе сотрудника (справочник Сотрудники) в ТЧ документа. . .	Очистка реквизитов документа при копировании Maks 09.04.2026 Алгоритм из решения ниже применим как для типовых, так и для нетиповых документов на самых различных конфигурациях. Задача: при копировании документа очищать определенные реквизиты и табличную. . .	модель ЗдравоСохранения 8. Подготовка к разному выполнению заданий anaschu 08.04.2026 https:/ / github. com/ shumilovas/ med2. git main ветка * содержимое блока дэлэй из старой модели теперь внутри зайца новой модели 8ATzM_2aurI	Блокировка документа от изменений, если он открыт у другого пользователя Maks 08.04.2026 Алгоритм из решения ниже реализован на примере нетипового документа, разработанного в конфигурации КА2. Задача: запретить редактирование документа, если он открыт у другого пользователя. / / . . .

Добавление нескольких элементов в цикле

Решение

Решение

@BANO Ренегат 1740 / 1085 / 386 Регистрация: 06.08.2014 Сообщений: 5,203 Записей в блоге: 1
	26.06.2016, 23:28
	Emmk, у вас весь этот js находится внутри php цикла? покажите пожалуйста код php 0

@BANO Ренегат 1740 / 1085 / 386 Регистрация: 06.08.2014 Сообщений: 5,203 Записей в блоге: 1
	26.06.2016, 23:56
	Сообщение было отмечено Emmk как решение Решение Emmk, я бы сделал по-другому я бы предложил немного другой-подход смотрите, сделать карту контейнером, в неё запихать статичные отметки (position: absolute) и спокойно прокручивать карту как душе угодно вы php скриптом зафигачьте все данные в массив объектов потом, просто можно пробежаться по этому массиву и поставить нужные координаты относительно "начала карты" 1

@Emmk 76 / 76 / 30 Регистрация: 12.02.2016 Сообщений: 199
	27.06.2016, 00:04 [ТС]
	BANO, тоже хороший вариант. Но мне хочется узнать что не так с appendChild? Есть ли способ на Ява Скрипте добить эту задачу или придется иную архитектуру придумывать? 0