Клонирование с помощью jQuery - PullRequest
Новая
       6

Клонирование с помощью jQuery

3 голосов
/ 21 декабря 2010

У меня есть форма, которая позволяет пользователям ссылаться на друзей.Я хочу добавить ссылку под двумя полями ввода, «друг по электронной почте» и «имя друга», которая будет клонировать «друг-ящик» один раз, и добавить ее ниже.Кроме того, атрибут имени «друг электронной почты» и «имя друга» имеют значение name="friend_email[0]" и name="friend_name[0]", как предлагается здесь .Какой лучший способ клонировать и увеличить индекс?Вот код: 

<div class="friend-box">

    <div class="field">
        <span><label for='friend_name'><strong>Friend's Name *</strong></label> </span>
        <input id='friend_name' name='friend_name[0]' type='text' />
    </div>

    <div class="field">
        <span><label for='friend_email'><strong>Friend's Email *</strong></label></span>
        <input id='friend_email' name='friend_email[0]' type='text' />
    </div>

</div>

Какой лучший способ сделать это?Например, одна из проблем, с которыми я столкнулся, заключается в том, что когда я клонировал «ящик для друзей» один и два раза, он явно клонировал его в геометрической прогрессии.Так что я предполагаю, что мне нужно иметь там идентификационный номер и увеличивать его.Или, как я уже видел другой метод, это клонировать «ящик друзей» при загрузке страницы и продолжать клонировать его из памяти.

Спасибо, Райан

Ответы [ 2 ]

1 голос
/ 21 декабря 2010

Я создал пример здесь: http://jsfiddle.net/K8hhW/5/

Вам не нужно беспокоиться об увеличении чисел в скобках, форма делает это автоматически для вас.

1 голос
/ 21 декабря 2010

Вам не нужно указывать индекс [0], если вы поставите [], браузер будет автоматически увеличивать индекс.

Что касается вашего вопроса, вот как я бы это сделал: http://jsfiddle.net/EJv4g/3/

По сути, я добавил div.friend-boxes, который оборачивает все коробки друзей. Я использую jQuery для получения первой ячейки друга, клонирую ее, затем сбрасываю значения поля ввода (если они были заполнены). Затем я добавляю его к элементу .friend-boxes.

Вы можете изменить append на prepend, если хотите, чтобы он был добавлен.

Надеюсь, это поможет!

  • Christian
...