Как динамически добавлять/удалять несколько разделов с помощью jquery

Question

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

Я пытаюсь создать веб-страницу rsvp. Пользователь выбирает, сколько гостей будет присутствовать, а затем вводит имя каждого гостя в появившиеся текстовые поля (см. Пример jsfiddle). Моя проблема заключается в том, что каждый div содержит ту же переменную, что и загруженную веб-страницу, поэтому, когда пользователь нажимает «отправить», любая конкретная переменная, указанная более одного раза на странице, также отправляется.

Что бы я хотел сделать, это добавить и/или вычесть каждый отдельный DIV на основе количества гостей, которое пользователь выбирает. Например, когда пользователь выбирает «9» гостей, все divs добавляются по порядку, но если они меняют свое мнение и выбирают «7», исчезают DIV 8 и DIV 9.

Это пример того, что я пытаюсь сделать: http://jsfiddle.net/3SvC7/11/

Вот отрывок из моего кода, но смотрите весь пример на jsfiddle!

$(function() { 

     $('#guestnum').change(function() { 
      $('.g1').slideUp("slow"); 
      $('.g2').slideUp("slow"); 
      $('.g3').slideUp("slow"); 
      $('.g4').slideUp("slow"); 
      $('.g5').slideUp("slow"); 
      $('.g6').slideUp("slow"); 
      $('.g7').slideUp("slow"); 
      $('.g8').slideUp("slow"); 
      $('.g9').slideUp("slow"); 
      $('#' + $(this).val()).slideDown("slow"); 
     }); 
    }); 
$(function() { 

     $('#accept').change(function() { 
      $('.no').slideUp("slow"); 
      $('.yes').slideUp("slow"); 
      $('#' + $(this).val()).slideDown("slow"); 
     }); 

     $('#decline').change(function() { 
      $('.no').slideUp("slow"); 
      $('.yes').slideUp("slow"); 
      $('#' + $(this).val()).slideDown("slow"); 
     }); 
    }); 

Кто-нибудь думает, что они могут помочь? Заранее спасибо!

Answer 1

Заканчивать эту скрипку: http://jsfiddle.net/3SvC7/19/

Это вроде того, что вы собираетесь?

var shown = 0; 
$(function() { 
    $('#guestnum').change(function() { 
     // Get the amount to show 
     var num = parseInt($('#guestnum').val()); 

     // Less than we need, add rows 
     if (shown < num) { 
      for (var i=shown; i <= num; i++) { 
       $('#g'+i.toString()).slideDown(); 
      } 
      shown = num; 
     } 

     // More than we need, remove rows 
     if (shown > num) { 
      for (var i=shown; i > num; i--) { 
       $('#g'+i.toString()).slideUp(); 
      } 
      shown = num; 
     } 
    }); 
}); 

Эта функция выполняет динамическое скрытие. Обратите внимание, что я поместил каждую гостевую строку в div с идентификатором формы g1, g2 и т. Д., Чтобы мы могли индексировать ее в цикле, и есть только одна копия каждой. Выпадающие значения также теперь являются самими числами, поэтому мы можем разобрать его на int.

Answer 2

Попробуйте ниже fiddle..I отредактировали немного html, так что она может работать для любого числа guests.Rather, чем при использовании кода statically, может быть, лучше использовать его dynamically, потому что это может привести к снижению количество code.I имеют integrated that html part in the js .Really сделал грубый эскиз для Упование это может помочь U в некоторых ways..Check, если это хочет мат .. :)

Fiddle

http://jsfiddle.net/x33ek/