javascript - 将垂直标签添加到 jquery.repeater 字段

Question

我正在使用 jquery.repeater字段并希望在重复的字段顶部添加标签。

请参阅下面我的最小可行示例:

$(document).ready(function() {
  'use strict';

  $('.repeater').repeater({
    defaultValues: {
      'textarea-input': 'foo',
      'text-input': 'bar',
      'select-input': 'B',
      'checkbox-input': ['A', 'B'],
      'radio-input': 'B'
    },
    show: function() {
      $(this).slideDown();
    },
    hide: function(deleteElement) {
      if (confirm('Are you sure you want to delete this element?')) {
        $(this).slideUp(deleteElement);
      }
    },
    ready: function(setIndexes) {

    }
  });

  window.outerRepeater = $('.outer-repeater').repeater({
    isFirstItemUndeletable: true,
    defaultValues: {
      'text-input': 'outer-default'
    },
    show: function() {
      console.log('outer show');
      $(this).slideDown();
    },
    hide: function(deleteElement) {
      console.log('outer delete');
      $(this).slideUp(deleteElement);
    },
    repeaters: [{
      isFirstItemUndeletable: true,
      selector: '.inner-repeater',
      defaultValues: {
        'inner-text-input': 'inner-default'
      },
      show: function() {
        console.log('inner show');
        $(this).slideDown();
      },
      hide: function(deleteElement) {
        console.log('inner delete');
        $(this).slideUp(deleteElement);
      }
    }]
  });
});

<form action="echo.php" class="repeater" enctype="multipart/form-data">
  <label>Product Name</label>
  <label>Price</label>
  <label>Date</label>
  <label>Description</label>
  <div data-repeater-list="group-a">
    <div data-repeater-item>
      <input name="untyped-input" value="A" />

      <input type="text" name="text-input" value="A" />

      <input type="date" name="date-input" />

      <textarea name="textarea-input">A</textarea>

    </div>
    <input data-repeater-create type="button" value="Add" />
  </div>
</form>

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

我希望我的最终结果如下所示:

如您所见，标签就在重复字段的正上方。

对我做错了什么有什么建议吗？

感谢您的回复!

Answer 1

您需要为元素设置相同的样式。

$(document).ready(function() {
  'use strict';

  $('.repeater').repeater({
    defaultValues: {
      'textarea-input': 'foo',
      'text-input': 'bar',
      'select-input': 'B',
      'checkbox-input': ['A', 'B'],
      'radio-input': 'B'
    },
    show: function() {
      $(this).slideDown();
    },
    hide: function(deleteElement) {
      if (confirm('Are you sure you want to delete this element?')) {
        $(this).slideUp(deleteElement);
      }
    },
    ready: function(setIndexes) {

    }
  });

  window.outerRepeater = $('.outer-repeater').repeater({
    isFirstItemUndeletable: true,
    defaultValues: {
      'text-input': 'outer-default'
    },
    show: function() {
      console.log('outer show');
      $(this).slideDown();
    },
    hide: function(deleteElement) {
      console.log('outer delete');
      $(this).slideUp(deleteElement);
    },
    repeaters: [{
      isFirstItemUndeletable: true,
      selector: '.inner-repeater',
      defaultValues: {
        'inner-text-input': 'inner-default'
      },
      show: function() {
        console.log('inner show');
        $(this).slideDown();
      },
      hide: function(deleteElement) {
        console.log('inner delete');
        $(this).slideUp(deleteElement);
      }
    }]
  });
});

label,input,textarea{display:inline-block; width:150px;}
label{border:solid 2px rgba(0,0,0,0);}

<form action="echo.php" class="repeater" enctype="multipart/form-data">
  <label>Product Name</label>
  <label>Price</label>
  <label>Date</label>
  <label>Description</label>
  <div data-repeater-list="group-a">
    <div data-repeater-item>
      <input name="untyped-input" value="A" />

      <input type="text" name="text-input" value="A" />

      <input type="date" name="date-input" />

      <textarea name="textarea-input">A</textarea>

    </div>
    <input data-repeater-create type="button" value="Add" />
  </div>
</form>

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