Question

我在这里找到了一个代码来创建表单中的重复字段： http://code.tutsplus.com/articles/reusable-custom-meta-boxes-part-3-extra-fields--wp-23821

我使用它并且它完美地工作，但现在我需要扩展它：我需要重复一组两个字段，一个选择和一个输入，而不是重新放置一个字段。

评论http://code.tutsplus.com/articles/reusable-custom-meta-boxes-part-3-extra-fields--wp-23821#comment-958708708中给出的解决方案有效，但对于同一时间的两个字段。

代码是：

jQuery('.repeatable-add').click(function() {
    field = jQuery(this).closest('td').find('.custom_repeatable li:last').clone(true);
    fieldLocation = jQuery(this).closest('td').find('.custom_repeatable li:last');
    jQuery(input, field).val('').attr('name', function(index, name) {
        return name.replace(/(\d+)/, function(fullMatch, n) {
            return Number(n) + 1;
        });
    })
    field.insertAfter(fieldLocation, jQuery(this).closest('td'))
    return false;
});

我做了一些搜索，并了解我应该在

之前创建一个变量

var elements = ['input', 'select'] ;

然后循环每个元素，在jQuery（输入，字段）级别但我无法实现工作代码！

HTML是：

<ul id="_transfer_extra-repeatable" class="custom_repeatable ui-sortable">
    <li>
         <span class="sort hndle ui-sortable-handle">|||</span>
         <select name="_transfer_extra[0][transfer_place]">
              <option value="">Select a value</option>
              <option value="453">Place1</option>
              <option value="462">Place2</option>
         </select>
         Price
         <input type="text" value="60" name="_transfer_extra[0][transfer_price]">
         <a class="repeatable-remove button" href="#">-</a>
    </li>

</ul>
<a class="repeatable-add button" href="#">+</a>

提前感谢您的帮助！

Answer 1

上面的代码有几个问题：

JavaScript与提供的HTML不匹配（应该放在带有td的表中，否则JS将无效，因为您使用closest("td")来获取字段。< / LI>
这里有一个拼写错误：jQuery(input, field)，它缺少一些引号，因为它应该是jQuery("input", field)。

一旦你纠正了这些问题（并添加forEach以遍历要更新的元素的数组），代码就可以了：

var elements = ['input', 'select'] ;

$(document).ready(function() {
  jQuery('.repeatable-add').click(function() {
    field = jQuery(this).closest('td').find('.custom_repeatable li:last').clone(true);
    fieldLocation = jQuery(this).closest('td').find('.custom_repeatable li:last');

    // for each of the element types, set the value to empty and change the name
    elements.forEach(function(el) {
      jQuery(el, field).val('').attr('name', function(index, name) {
        return name.replace(/(\d+)/, function(fullMatch, n) {
          return Number(n) + 1;
        });
      })
    });
    
    field.insertAfter(fieldLocation, jQuery(this).closest('td'))
    return false;
  });
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<table>
  <tr>
    <td>
      <ul id="_transfer_extra-repeatable" class="custom_repeatable ui-sortable">
        <li>
          <span class="sort hndle ui-sortable-handle">|||</span>
          <select name="_transfer_extra[0][transfer_place]">
            <option value="">Select a value</option>
            <option value="453">Place1</option>
            <option value="462">Place2</option>
          </select>
          Price
          <input type="text" value="60" name="_transfer_extra[0][transfer_price]"/>
          <a class="repeatable-remove button" href="#">-</a>
        </li>
      </ul>
      <a class="repeatable-add button" href="#">+</a>
    </td>
  </tr>
</table>

转换函数以添加数组

1 个答案: