Slyweb
На разработку сайта! Скидки 50%!

Динамические поля clone

Вы можете задавать любые вопросы по jQuery.

Динамические поля clone

Сообщение Grummk » 01 фев 2012, 06:46

Доброго утра, всю ночь мучился с динамическими полями и clone(), не выходит то что надо

html
Код: Выделить всё
<ul id="files">
   <li class="file">
      <input type="file" name="image[]" class="input-file" />
      <input type="button" value="" onclick="file.remove()" />
   </li>
   <li class="file">
      <input type="file" name="image[]" size="40" class="input-file" />
      <input type="button" value="" onclick="file.remove()" />
   </li>
   <li class="file">
      <input type="file" name="image[]" size="40" class="input-file" />
      <input id="addbutton" type="button" onclick="file.add()" />
   </li>
</ul>


js

Код: Выделить всё
var file = {

   add: function()// добавляет поле
   {
      clone = $('#addbutton').parent().clone(true).insertAfter('#addbutton');


      $('#addbutton').after(this.minus).remove();
   },

   remove: function()// удаляем поле
   {
      $(this).parent().remove();
   }
}


file.add() должен клонировать и вставлять после себя, ещё одно такое поле, получает без обёртки <li class="file"></li> и вставляет сразу после <input id="addbutton" type="button" onclick="file.add()" /> а должен после li

Код: Выделить всё
   <li class="file">
      <input type="file" name="image[]" size="40" class="input-file" />
      <input id="addbutton" type="button" onclick="file.add()" />
   </li>


ещё один вопрос, почему remove.add() работает если вынести отдельной фунцией т.е без var file = {}, this не отсылается, пробовал вызывать функцию, передавая this remove.add(this) без результатно
Grummk
 
Сообщения: 2
Зарегистрирован: 01 фев 2012, 06:27

Re: Динамические поля clone

Сообщение admin » 01 фев 2012, 12:43

Здравствуйте, думаю этот код лучше:

Код: Выделить всё
<!DOCTYPE HTML>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">


<script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/jquery/1.6.2/jquery.min.js"></script>

</head>
<body>
<script type="text/javascript">
var file = {
   add: function(el)// добавляет поле
   {
   
      clone = $('#addbutton').parent().clone(true);

     $(el).parent().after($(clone));
      $('#addbutton').after(this.minus).remove();
     
   },

   remove: function(el)// удаляем поле
   {
      $(el).parent().remove();
   }
}
</script>

   <ul id="files">
   <li class="file">
      <input type="file" name="image[]" class="input-file" />
      <input type="button" value="" onclick="file.remove(this)" />
   </li>
   <li class="file">
      <input type="file" name="image[]" size="40" class="input-file" />
      <input type="button" id="remove" value="" onclick="file.remove(this)" />
   </li>
   <li class="file">
      <input type="file" name="image[]" size="40" class="input-file" />
      <input id="addbutton" type="button" value="add" onClick="file.add(this)" />
   </li>
</ul>
</body>
</html>
 




Вы забыли передать элемент в функцию!
admin
Администратор
 
Сообщения: 165
Зарегистрирован: 15 авг 2009, 20:02

Re: Динамические поля clone

Сообщение Grummk » 01 фев 2012, 14:05

Круто, спасибо! работает, а можно каждый раз менять name id и другие параметры элементов? начал пробовать clone(false).removeAttr('id'); т.е например вставлять следующий элемент с новым id
Grummk
 
Сообщения: 2
Зарегистрирован: 01 фев 2012, 06:27

Re: Динамические поля clone

Сообщение admin » 01 фев 2012, 17:09

Менять Id нужно, по стандарту на странице не может быть двух элементов с одинаковыми ID. Я бы на Вашем месте использовал один класс, а поиск и удаление производил бы по его индексу (через функции index,eq и т.д.).
admin
Администратор
 
Сообщения: 165
Зарегистрирован: 15 авг 2009, 20:02


Вернуться в Вопросы по jQuery

Кто сейчас на конференции

Сейчас этот форум просматривают: нет зарегистрированных пользователей и гости: 1

cron