Добавление блока кода для отправки с помощью jQuery

126
17

http://jsfiddle.net/rfnslyr/xcqa5/

Цель этого небольшого "приложения" - это ввести имя файла, вставить в документ HTML, а когда вы нажмете кнопку "Отправить", появится небольшой оранжевый блок под кнопкой "Отправить" с указанием введенного имени файла, а также извлеченных классов CSS и идентификаторов,

Прямо сейчас он возвращает правильный ответ в консоли, когда вы вставляете код HTML, но я хочу отобразить его в небольших блоках кода ниже кнопки отправки, как в моем примере.

Каждый раз, когда вы вставляете новый код + новое имя файла и нажимаете submit, второй блок, как первый, появляется после первого блока с новыми именами файлов и извлечения.

Это код, который я хочу дублировать +, заполненный именем файла/класса, вставленным в submit:

<div id="classes">
<div class="pageTitle">%filename%</div>
<div class="cssClassesIDs">
%classes%
</div>
</div>

Я не уверен, как дублировать и добавлять эту структуру кода повторно на submit.

спросил(а) 2021-01-25T16:36:33+03:00 5 месяцев назад
1
Решение
63

Здесь изменен JSFiddle:

http://jsfiddle.net/xcqa5/1/

var codeNameVal = $('input#codeName').val();
var newClone = $('#classes').clone();
$(newClone).find('div.pageTitle').html(codeNameVal);
$(newClone).find('div.cssClassesIDs').html(uniqueNames.join(','));
$('#container').append(newClone);
$(newClone).show();

В основном у вас есть скрытый div, который построен так, как вы хотите. Когда они нажимают кнопку submit, вы клонируете скрытый div, задайте значения внутри того, что вам нужно, затем добавьте этот div в конец div контейнера. Когда вы это сделаете, вы покажете свой недавно клонированный div с помощью show().

clone() JQuery clone()

http://api.jquery.com/clone/

и append()

https://api.jquery.com/append/

ответил(а) 2021-01-25T16:36:33+03:00 5 месяцев назад
Ваш ответ
Введите минимум 50 символов
Чтобы , пожалуйста,
Выберите тему жалобы:

Другая проблема