Drag ‘n Drop уничтожает схему нумерации идентификаторов?
У меня есть веб-приложение, которое включает в себя редактор анкет. Там может быть много вопросов; у каждого может быть много ответов; и каждый вопрос имеет два набора переключателей для настройки различных вариантов вопроса.
Я использую следующий стиль идентификаторов:
id="Q-$questionNumber"id="Q-$questionNumber-A-$answerNumber"…где $ questionNumber и $ answerNumber заменяются соответствующими числами.
Схема нумерации идентификаторов имеет две функции:
- При нажатии на элемент мой javascript может проверить идентификационный номер, чтобы узнать, к какому вопросу / ответу он принадлежит.
- Элементы ввода имеют имена, которые следуют той же схеме нумерации. Когда форма отправлена, мой PHP-код может определить, с каким номером вопроса / номером ответа связано отправленное значение, изучив имя.
Естественно, когда я перетаскиваю вопрос, все эти идентификаторы и имена должны быть перенумерованы. Я написал javascript / jQuery, который успешно перенумеровывает все и работает правильно. Но это кажется грязным.
Кажется, что я мог бы удалить схему нумерации со всех идентификаторов и просто выяснить, что это за вопрос / номер ответа, изучив его размещение в DOM с помощью jQuery. Но, похоже, мне все равно нужно использовать схему нумерации для имен входных элементов, чтобы мой PHP-код на сервере мог определить, к какому номеру вопроса / номеру ответа принадлежат различные отправленные элементы формы.
Есть ли способ лучше?
ОБНОВИТЬ по запросу от Bankzilla. Вот пример HTML. Это один вопрос. Каждый документ может иметь много вопросов, на каждый из которых может быть много ответов.
<div id="Q-1" class="QuestionGroup ui-draggable">
<br>
<h2 id="QuestionText-Q-1">
Question #1
<input type="text" name="questionText-Q-1" value="" id="questionText-Q-1" class="questionText" maxlength="256" size="70">
</h2>
<div class="containerForAnswers">
<p class="answerPar">
<span class="answerLabel answerLabelinEditView">#1:</span>
<input type="text" name="Q-1-A-1" value="" id="Q-1-A-1" class="answer answer-Q-1" maxlength="256" size="70">
</p>
<p class="answerPar">
<span class="answerLabel answerLabelinEditView">#2:</span>
<input type="text" name="Q-1-A-2" value="" id="Q-1-A-2" class="answer answer-Q-1" maxlength="256" size="70">
</p>
<p class="answerPar">
<span class="answerLabel answerLabelinEditView">#3:</span>
<input type="text" name="Q-1-A-3" value="" id="Q-1-A-3" class="answer answer-Q-1" maxlength="256" size="70">
</p>
</div>
</div>
Решение
Не уверен, поможет ли это, но вы можете использовать массивы во входных данных. Упрощает структурирование вопросов / ответов в вашем случае, и вам не нужно беспокоиться о нумерации.
<input name="Q[1][text]"/>
<input name="Q[1][answers][]" value="number 1"/>
<input name="Q[1][answers][]" value="number 2"/>
Когда у вас есть несколько Q[1][answers][] он будет складывать их как индекс массива, 0,1,2,3,4.
Если бы вы выбросили все вышеперечисленное, это выглядело бы как
var_dump($_POST);
array(
'Q' => array(
1 => (
'text' => '',
answers => array(
0 => 'number 1'
1 => 'number 2'
)
)
)
)
Теперь, когда вы перетаскиваете каплю, вам нужно только найти идентификатор вопроса, а не порядок ответов.
Другие решения
Изучив это еще немного, я думаю, что в следующий раз я мог бы попробовать нечто подобное: полностью исключить идентификаторы номера вопроса / номера ответа из всех имен и идентификаторов элементов формы. Когда форма отправлена, идентификаторы номера вопроса / номера ответа будут добавлены через jQuery ко всем элементам формы. Таким образом, мне не пришлось бы иметь дело с перенумерацией любых идентификаторов номера вопроса / номера ответа во время перетаскивания, вставки, вырезания / вставки и т. Д.