Мое приложение успешно создает элементы и присваивает им разные (увеличивающиеся) идентификаторы.Сортировка согласованности динамически созданных идентификаторов на элементах DOM
Теперь моя проблема связана с тем, что пользователь удаляет эти элементы (поскольку у них есть возможность удалить и создать), последовательность этих идентификаторов ломается, поэтому мое приложение работает не очень хорошо.
Этот Fiddle представляет то, что у меня есть. Просто текстовое поле, добавляющее его значение и несколько других элементов внутри collapsible столько раз, сколько хочет пользователь (по какой-то причине моя скрипка не увеличивает значение alert, но отлично работает на моей платформе).
SCRIPT (К сожалению переменной TXT слишком долго)
$('#Add').click(function() {
if ($("#MedNameStren").val() != "") {
var value = $("#MedNameStren").val();
var noOfMeds = $('#NoOfMedicines').val();
//to check current value
alert(noOfMeds);
var text = '<div data-role="collapsible" data-collapsed="true" data-iconpos="left" data-content-theme="e">' + '<h2>' + desc + '</h2>' + '<div class="ui-grid-a">' + '<div class="ui-block-a" style="width:25%; margin-right:3%;">' + '<input id="quantity' + noOfMeds + '" class="quantity" type="text" placeholder="Quantity" />' + '</div>' + '<div class="ui-block-b" style="width:70%; margin-right:2%;"">' + '<textarea id="directions' + noOfMeds + '" class="directions" cols="40" rows="4" placeholder="Directions given by your GP." ></textarea>' + '</div>' + '</div>' + '<button key="' + vpid + '">Remove</button>' + '</div>';
$("#medListLi").append(text);
$('button').button();
$('#medListLi').find('div[data-role=collapsible]').collapsible();
$('#medListLi li').listview("refresh");
$('#medListLi').trigger("create");
document.getElementById("manuallyName").value = "";
noOfMeds++
$("#NoOfMedicines").val(noOfMeds);
}
else {
alert('Please Provide Medicine Name')
}
});
Я использую счетчик, который аккуратно приращения идентификаторов quantity и description как:
quantity0 quantity1 quantity2 ого и так далее, но после вызова следующего сценария:
//Deletes colapsible sets (Medicines) from the selected List
$('#medListLi').on('click', 'button', function (el) {
$(this).closest('div[data-role=collapsible]').remove();
var key = $(this).attr('key');
localStorage.removeItem(key);
var noOfMeds = $('#NoOfMedicines').val();
noOfMeds--
$("#NoOfMedicines").val(noOfMeds);
//location.reload();
});
в зависимости от того, какой элемент (collapsible) удален, идентификаторы перестают быть согласованными. Например, если collapsible с id="quantity1" удален, счетчик вернется к 1 (в настоящее время 2), а к следующему добавлению соответствующий collapsible получит уже принятый id, и, к сожалению, мне это не нужно.
Возможно, я делаю этот звук более сложным, чем он есть, но по достоинству оценят любые предложения или идеи для решения этой проблемы (если это возможно).
Если вам нужна дополнительная информация, пожалуйста, дайте мне знать.
Вам действительно нужен идентификатор на этих элементах? Все элементы уже имеют индекс, который делает их однозначно выбираемыми. –
вы считаете, что count и id одинаковы в вашем коде, но вы не хотите этого предположения в реальной жизни. Решение: не используйте идентификаторы, подобные этому, или отслеживайте количество и идентификатор отдельно. – dandavis
Ну, следующий бит приложения (когда нажата кнопка «Отправить») вся информация должна перейти в 'sessionStorage' в форме JSON, поэтому мне нужен способ получить значения из всех« величин »и« направлений ». Может быть, я должен подойти к этому по-другому? – Scur4