Question

我有几个输入字段

<input type="text" placeholder="name">
<input type="text" placeholder="age">
<input type="text" placeholder="gender">
<input type="text" placeholder="interest">

，每次我在这些输入字段上书写时，它都应反映到文本区域，并输出带有|的格式。或管道符号

示例：

<textarea>
name|age|gender|interest
</textarea>

当我添加另一组字段时，它将其写在第二行

<textarea>
name|age|gender|interest
name|age|gender|interest
name|age|gender|interest
</textarea>

“子代数”数量也需要根据文本区域中的每行或多少个子代自动调整。

这是我的提琴，目的是使它更加清晰https://jsfiddle.net/sjgrLcqx/4/

Answer 1

我在这里做了几件事。

我将您的HTML字符串设置为单个变量，因此，在更改它时，不必重复两次。
我在您的输入中添加了类，以便找出用户要输入的类。
我使用了一些您可能不知道的jQuery方法，例如index()和parent()。
我使用了一些JavaScript函数来遍历我创建的child对象上的属性，以简化从其属性创建字符串的过程。

查看代码，如果您有任何疑问，请告诉我。另外，即使您不知道从哪里开始，下次也可以自己尝试。只要继续尝试一些东西，直到开始起作用。编码具有挑战性，但这很有趣。

jQuery(document).ready(function () {

  var childInfoArray = [];

  var formHtml = '<div class="optionBox"><div class="block" style=""><input class="crow fullName" type="text" placeholder="Full name"><input class="crow width50 marginsmall age" type="text" placeholder="Age"><input class="crow width50 nomargin gender" type="text" placeholder="gender"><input class="crow interest" type="text" placeholder="Interest"><span class="remove">Remove this section</span></div><div class="block"><span class="add">Add another child\'s info</span></div></div>';

  jQuery('#frmPaymentSantasgrotto').append(formHtml);

  jQuery('.add').click(function () {
    jQuery('.block:last').before(formHtml);
  });

  jQuery('.optionBox').on('click', '.remove', function () {
    jQuery(this).parent().remove();
  });


  jQuery('.optionBox').on('keyup', 'input', function () {

    var index = $(this).parent().index('div.block');

    var child = {};

    if (childInfoArray[index] != null) {
      child = childInfoArray[index];
    }
    else {
      child = {
        fullName: '',
        age: '',
        gender: '',
        interest: ''
      }
    }

    if ($(this).hasClass('fullName')) {
      child.fullName = jQuery(this).val();
    }
    else if ($(this).hasClass('age')) {
      child.age = jQuery(this).val();
    }
    else if ($(this).hasClass('gender')) {
      child.gender = jQuery(this).val();
    }
    else if ($(this).hasClass('interest')) {
      child.interest = jQuery(this).val();
    }
    childInfoArray[index] = child;
    printChildArray();

  });

  function printChildArray() {
    var childInfoString = "";
    childInfoArray.forEach(child => {
      Object.values(child).forEach((attribute, index) => {
        childInfoString += attribute;
        if (index !== Object.keys(child).length - 1) {
          childInfoString += ' | ';
        }
        else {
          childInfoString += ' \n';
        }
      });
    });
    $('textarea').html(childInfoString);
  }

});

使用分隔符jquery自动将输入字段值写入textarea

1 个答案: