Jquery Repeater，如何制作底部的“创建按钮”？

Question

我知道data-repeater-create=""必须在id="left_repeater"中，否则它将不能用作create按钮。有没有办法让按钮在id="left_repeater"或id="right_repeater"之外工作

我的目标是当我单击add left按钮时，它将只为add right按钮创建左侧输入，反之亦然。这两个按钮都在最底部。

JS fiddle link to see the codes

​

$('#left_repeater').repeater({
  show: function() {
    $(this).slideDown();
  },
});

$('#right_repeater').repeater({
  show: function() {
    $(this).slideDown();
  },
});

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery.repeater/1.2.1/jquery.repeater.min.js"></script>

<div id="left_repeater">
  <div data-repeater-list="left_items">
    <div data-repeater-item>
      <div class="row">
        <div class="col-6">
          <input type="text" name="name" class="form-control form-control-sm m-input" placeholder="left">
        </div>
        <div class="col-6">

        </div>
      </div>

    </div>
  </div>
  <!-- <div data-repeater-create="" class="btn btn-sm btn-success">
	        <span><i class="la la-plus"></i><span>Add</span></span>
	    </div> -->
</div>

<div id="right_repeater">
  <div data-repeater-list="right_items">
    <div data-repeater-item>
      <div class="row">
        <div class="col-6">

        </div>
        <div class="col-6">
          <input type="text" name="name" class="form-control form-control-sm m-input" placeholder="right">
        </div>
      </div>

    </div>
  </div>
  <div data-repeater-create="" class="btn btn-sm btn-success">
    <span><i class="la la-plus"></i><span>Add</span></span>
  </div>
</div>

<div class="row">
  <div class="col-6 text-center">
    <div data-repeater-create="" class="btn btn-sm btn-success">
      <span><i class="la la-plus"></i><span>Add Left</span></span>
    </div>
  </div>

  <div class="col-6 text-center">
    <div data-repeater-create="" class="btn btn-sm btn-success">
      <span><i class="la la-plus"></i><span>Add Right</span></span>
    </div>
  </div>
</div>

​

Answer 1

将#left_repeater放入div容器中。

<div class="container">
   <div id="left_repeater">
     .....
   </div>
</div>

将CSS样式添加到此

.container {
  display: flex;
}

https://jsfiddle.net/y1bpot5n//