Вопрос:
Я хочу показать один и тот же фрагмент кода html 10 раз под именем div: <div id=»add_remove_product_name»> Нажимая кнопку: <button id=»add_another_product_name»>. Мне кажется, мне нужна какая-то петля для работы, но я не уверен. Любое предложение будет полезно, спасибо.
Мой HTML-код:
<div id=»product_name»> <input id=»skriv_produktnavn» placeholder=»Skriv Produktnavn her» required></label> <button id=»add_another_product_name»>Tilføj endnu et produktnavn</button> <div id=»add_remove_product_name»> <input id=»added_product_name» placeholder=»Skriv Produktnavn her» required></label> <button id=»remove_product_name»>X</button> </div> Лучший ответ:
Техника добавления дополнительных элементов без необходимости создавать уродливые строки html в JavaScript – это начать с одного скрытого набора элементов в html. При загрузке страницы вы удаляете этот набор, но сохраняете ссылку на него. Затем, когда вы хотите добавить набор к странице, вы клонируете выбранный вами набор. Все это проще, если вы добавите контейнер div вокруг дополнительных входов.
Вам также необходимо убедиться, что значения атрибута id уникальны. В случае кнопок удаления вы можете заменить id class. Что касается значений входных id, если они вам действительно нужны, вы можете добавить к ним значение индекса.
Поскольку кнопки удаления динамически добавляются, я предлагаю использовать делегирование делегирования при привязке обработчика кликов.
HTML:
<div id=»product_name»> <input id=»skriv_produktnavn» placeholder=»Skriv Produktnavn her» required=»required»/> <button id=»add_another_product_name»>Tilføj endnu et produktnavn</button> <div id=»additional_product_names»> <div class=»add_remove_product_name» style=»display: none;»> <input id=»added_product_name» placeholder=»Skriv Produktnavn her» required=»required»/> <button class=»remove_product_name»>X</button> </div> </div> </div>
JavaScript:
$(function() { var MAX = 10; var $addBtn = $(‘#add_another_product_name’), $additionalContainer = $(‘#additional_product_names’); $TEMPLATE = $additionalContainer.children(‘:first’).remove(); function update() { var $additonalDivs = $additionalContainer.children(); // Enable/disable the add button. $addBtn.prop(‘disabled’, $additonalDivs.length >= MAX); // Re-index the «id» attributes. $additonalDivs.find(‘input’).attr(‘id’, function(i) { return ‘added_product_name[‘ + i + ‘]’; }); } $addBtn.click(function() { $TEMPLATE.clone().appendTo($additionalContainer).show(); update(); }); $(‘#product_name’).on(‘click’, ‘.remove_product_name’, function() { $(this).closest(‘.add_remove_product_name’).remove(); update(); }); });
Ответ №1
Используйте цикл for для конкатенации 10 копий HTML-кода. Затем используйте .after() чтобы поместить это после DIV.
$(«#add_another_product_name»).click(function() { var html = »; for (var i = 0; i < 10; i++) { html += ‘html code that you want to repeat’; } $(«#add_remove_product_name»).after(html); } Ответ №2
Вы можете использовать jQuery clone() однако при клонировании элемента все атрибуты будут одинаковыми. Например, все они будут иметь одинаковый атрибут id, который вызовет проблемы и недействителен html
Итак, чтобы сделать клон правильно, вы исправили клонированный элемент
ДЕМО: http://jsfiddle.net/rpyt445e/
var $tpl = $(‘#product_name’).clone(); var num = 0 $(‘#clone’).click(function () { num++; var $cloned = $tpl.clone(); $cloned.attr(‘id’, $tpl.attr(‘id’) + ‘_’ + num); $(‘:not([id=»»])’, $cloned).each(function(){ $(this).attr(‘id’, $(this).attr(‘id’) + ‘_’+num); }); $cloned.appendTo(‘#wrapper’); });
HTML:
<div id=»wrapper»> <div id=»product_name»> <input id=»skriv_produktnavn» placeholder=»Skriv Produktnavn her» required /> <button id=»add_another_product_name»>Tilføj endnu et produktnavn</button> <div id=»add_remove_product_name»> <input id=»added_product_name» placeholder=»Skriv Produktnavn her» required /> <button id=»remove_product_name»>X</button> </div> </div> </div> <button id=»clone»>Clone</button>
