Question

我在每个＆＃34;可折叠面板中动态显示手风琴＆＃34;在手风琴中，我试图为每个面板动态生成文本框，当有人点击＆＃34; +添加更多命令＆＃34;每个面板的按钮。我正在使用下面的自定义JQuery脚本动态创建文本输入..

JADE：

#accordion.panel-group
each item in session.intents
  .panel.panel-default
    .panel-heading
      h4.panel-title
        a(data-toggle='collapse', data-parent='#accordion', href='#collapse' + item) #{item}
    div(id="collapse#{item}").panel-collapse.collapse
      .panel-body
        .col-lg-6
          .my-form
            form(role='form', method='post')
              .text-box
                .form-group.input-group
                  span.input-group-addon
                    i.glyphicon.glyphicon-comment
                  input#box1.form-control(type='text', name='boxes[]', placeholder='Give a sample command..')
                  a.input-group-btn
                    button.remove-box.btn.btn-primary(type='button')
                      i.glyphicon.glyphicon-trash

              .add-box(href='#') 
                button.btn.btn-primary(type='button')
                  i.glyphicon.glyphicon-plus
                  |           Add more commands
              p
                button.btn.btn-primary(type='button')
                  i.glyphicon.glyphicon-save
                  |           Save commands

JQUERY：

jQuery(document).ready(function($){
  $('.my-form .add-box').click(function(){
      var n = $('.text-box').length + 1;
      var box_html = $('<div class="text-box"><div class="form-group input-group"><span class="input-group-addon"><i class="glyphicon glyphicon-comment"></i></span><input type="text" class="form-control" placeholder="Give an app name.." name="boxes[]" id="box1"><a class="input-group-btn"><button class="remove-box btn btn-primary" type="button"><i class="glyphicon glyphicon-trash"></i></button></a></div></div>');
      box_html.hide();
      if (n > 1) {
          $('.my-form .text-box:last').after(box_html);
      } else {
          $('.my-form').append(box_html);
      }
      box_html.fadeIn('slow');
      return false;
  });
  $('.my-form').on('click', '.remove-box', function(){
      $(this).parent().parent().css( 'background-color', '#FF6C6C' );
      $(this).parent().parent().fadeOut("slow", function() {
          $(this).remove();
          $('.box-number').each(function(index){
              $(this).text( index + 1 );
          });
      });
      return false;
  });
  $('.my-form').on('click', '.remove-box-out', function(){
      $(this).parent().css( 'background-color', '#FF6C6C' );
      $(this).parent().fadeOut("slow", function() {
          $(this).parent().remove();
          $('.box-number').each(function(index){
              $(this).text( index + 1 );
          });
      });
      return false;
  });

}）;

当我点击＆＃34;添加更多命令＆＃34;下面的按钮，它添加了更多的文本输入框，但只在第二个面板下（而不是在第一个面板下）。

问题：

如何向两个面板中的每一个添加动态文本框？
如何将一些信息传递给模型，告诉它文本值来自哪个面板（Panel1或Panel2）？

Answer 1

$('.my-form .text-box:last')始终选择最后一个文本框，因此如果您在同一个my-form中有两个面板，则只会选择最后一个面板的最后一个面板。因此将您的选择器更改为将新文本框添加到文本框父项末尾而不是最后一个文本框之后的内容。

从手风琴小组中提交文本字符串

1 个答案: