Question

我有以下HTML：

<div class="multi-field-wrapper">
  <div class="multi-fields">
    <div class="multi-field">
      <a class="panel-heading collapsed" role="tab" id="headingOne" 
         data-toggle="collapse" 
         data-parent="#accordion" 
         href="#collapseOne" 
         aria-expanded="true" 
         aria-controls="collapseOne">
        <h4>Add Data</h4>
        <i class="fa fa-chevron-circle-down"></i>
      </a>
      <div id="collapseOne"
           class="panel-collapse collapse in"
           role="tabpanel"
           aria-labelledby="headingOne">
        <div class="panel-body">
          Content Here
        </div>
      </div>
    </div>
  </div>
  <button type="button" class="add-field">Add field</button>
</div>

以及使用jQuery的以下JavaScript：

$('.multi-field-wrapper').each(function () {
  var $wrapper = $('.multi-fields', this);
  $(".add-field", $(this)).click(function (e) {
    $('.multi-field:first-child', wrapper).clone(true).appendTo($wrapper).find('input').val('').focus();
  });
  $('.multi-field .remove-field', $wrapper).click(function () {
    if ($('.multi-field', $wrapper).length > 1) {
      $(this).parent('.multi-field').remove();
    }
  });
});

问题是，当可折叠只有一个href="#collapseOne将定位tabpanel collapseOne时，但当我添加了一个或多个多字段时，href="#collapseOne"将定位所有{{1} } tabpanel因为它有相同的名称。

每当我们按下“添加字段”按钮或在此{{3}处使用此备用脚本时，是否有办法让id和#href的{{1}}不同}？

动态表单可折叠，单独折叠Jquery

0 个答案: