необходимо отображать дополнительные текстовые вводы при выборе кнопки добавления, также необходимо удалить поля

Question

У меня есть форма, которая требует от пользователя ввода результатов своего проекта.

Они должны вводить хотя бы один результат, и для каждого результата требуется как минимум 2 показателя, связанные с ним.

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

Я набросал, что этобудет выглядеть, если бы у пользователя было два результата.

Пунктирные линии - действия каждой кнопки.

Я хотел бы добиться этого с помощью jQuery, но я никогда не делал ничего, кроме простого отображения / скрытия поля, основанного начто пользователь нажимает.

Любая помощь приветствуется.

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

РЕДАКТИРОВАТЬ: начал проверять здесь: http://jsfiddle.net/bkmorse/FW6s8/4/ - но кнопка добавления меры не работает должным образом.

Answer 1

Вот кое-что, что я собрал:

http://jsfiddle.net/jtbowden/XFsyh/

Самая хитрая часть, и большая часть кода имеет дело с именами ввода формы.

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

Обновление: Вот версия, которая позволяет вам удалить первый результат / показатель до тех пор, пока другиесуществует, плюс я исправил некоторые другие вещи (ошибки):

http://jsfiddle.net/jtbowden/XFsyh/4/

Обратите внимание на использование .live().Кнопки в вашем примере не работают, потому что вы назначаете обработчики один раз, до того, как эти кнопки существуют..live() назначает обработчик для корня DOM, так что любые добавленные позже элементы также будут иметь правильный обработчик.

Вот оригинальная версия с исправлениями , согласно вашему запросу:

http://jsfiddle.net/jtbowden/JTUkE/

И если вы хотите, чтобы он был анимирован:

http://jsfiddle.net/jtbowden/brBSa/