Question

所以，我有一个div包含一个下拉列表，几个输入字段，以及一个名为＆＃34;添加过程＆＃34;的按钮。

当用户点击Add Procedure时，会为用户可能想要添加的新过程添加相同的div（我尽可能地使用了类）。

我似乎无法弄清楚当用户点击添加过程时，它应该崩溃（BS3崩溃）该特定div并在下面添加div（如前所述）。但是它会崩溃或不崩溃所有的div，而不仅仅是那个，我猜它是因为同一个类名？

所以，我下面的JS代码只是添加了新的字段（或div），但我不知道如何在单击ITS按钮时折叠div。我尝试创建所有div的列表，然后添加过程＆＃39;随后添加的按钮。然后循环它，但它没有工作（没有显示错误）。

我已经添加了下面尝试过的方法之一，但这种做法并不奏效。关于如何修复它的任何想法？我已经到处寻找类似的问题了。

HTML：

  <div class="list col-xs-6">
    <div class="dropdown">
      <input type="text" placeholder="Add procedure name" id="add-proc">
    </div>
  </div>

  <div class="list col-xs-6">
    <div class="dropdown">
      <select name="list2" class="dropdown-select" onchange="hideorshow()" id="list2" class="list2">
                                <option value="1" selected>To be done </option>
                                <option value="2">Done</option>
                                <option value="3">Make note</option>
                            </select>
    </div>
  </div>

  <br>
  <br>

  <div class="panel panel-default panel-group">
    <div class="panel-heading">
      <span class="panel-title" data-toggle="collapse" href="#collapse1">
                                <i class="fa fa-plus"></i>
                            </span>
    </div>
    <div class="panel-collapse collapse-in" id="collapse1">
      <div class="panel-body">
        <div class="cost">
          <input type="number" placeholder="Add cost" class="add-cost" min="0">
        </div>
        <div class="form-group appointment">
          <div class="input-group datetimepicker">
            <input type="text" class="form-control" readonly>
            <span class="input-group-addon">
                                            <span class="fa fa-calendar"></span> +
            <span class="fa fa-clock-o"></span>
            </span>
          </div>
        </div>
        <div class="col-xs-6 row">
          <div class="specific-inputdiv">
            <input type="text" placeholder="Add your note here" class="specific-input">
          </div>

        </div>
        <div class="col-xs-6">
          <div class="procedure">
            <input type="button" class="btn btn-default add_fields_btn" class="add-proc2" onclick='add_fields();' value="Add new procedure">
          </div>
        </div>
      </div>
    </div>
  </div>



  <div id="add_field" class="col-xs-12"></div>
  <div class="col-xs-12">
    <input type="submit" class="btn btn-success" id="submit" value="Submit" name="job_submit">

  </div>


</div>

JS：

var listOfCollapse = document.getElementsByClassName("collapse-in");
var listOfAddBtn = document.getElementsByClassName("add_fields_btn");
var room = 1;

function add_fields() {


  room++;
  var objTo = document.getElementById('add_field');
  var divtest = document.createElement("div");
  divtest.innerHTML = '<div class="row"> <div class="list col-xs-6"> <div class="dropdown"> <input type="text" placeholder="Add procedure name" id="add-proc"> </div> </div> <div class="list col-xs-6"> <div class="dropdown"> <select name="list2" class="dropdown-select" onchange="hideorshow()" id="list2" class="list2"> <option value="1" selected>To be done </option> <option value="2">Done</option> <option value="3">Make note</option> </select> </div> </div> <br> <br> <div class="panel panel-default panel-group"> <div class="panel-heading"> <span class="panel-title" data-toggle="collapse" href="#collapse1"> <i class="fa fa-plus"></i> </span> </div> <div class="panel-collapse collapse-in" id="collapse1"> <div class="panel-body"> <div class="cost"> <input type="number" placeholder="Add cost" class="add-cost" min="0"> </div> <div class="form-group appointment"> <div class="input-group datetimepicker"> <input type="text" class="form-control" readonly> <span class="input-group-addon"> <span class="fa fa-calendar"></span> + <span class="fa fa-clock-o"></span> </span> </div> </div> <div class="col-xs-6 row"> <div class="specific-inputdiv"> <input type="text" placeholder="Add your note here" class="specific-input"> </div> </div> <div class="col-xs-6"> <div class="procedure"> <input type="button" class="btn btn-default add_fields_btn" class="add-proc2" onclick="add_fields();" value="Add new procedure"> </div> </div> </div> </div> </div> </div>';
  objTo.appendChild(divtest);
}

/*Code to collapse or uncollapse a div, which is collapsing every div on any button click not just that particular button's div*/

for (var i = 0, len = listOfCollapse.length; i < len; i++) {

    var collapseItem = listOfCollapse[i];

    $(collapseItem).collapse('toggle'); 
    // Tried this too instead ->  $(collapseItem).closest('.collapse-in').collapse('toggle'); 
    }

Answer 1

您需要将元素作为参数传递给add_fields()，因此您可以在其上调用collapse()：

onclick="add_fields(this)"

然后：

function add_field(elem) {
    $(elem).closest(".collapse-in").collapse("toggle");
    // rest of code that adds new fields
}

单击一个按钮会折叠所有div而不是它所属的div

1 个答案: