从 JS 文字模板动态生成输入字段：输入值不显示

Question

我已经解决了这个问题，我希望得到任何帮助 - 这可能是显而易见的事情，但目前我看不出问题所在。一些背景：我正在以描述一个人的形式动态添加一组字段。对于全新条目，这些字段可以为空，或者用户可以从现有人员（描述为访客）列表中进行选择，我将其呈现在 div 中。用户可以单击每个来宾 div 并添加一行新的组输入，其中输入值已设置。这就是我遇到问题的地方。我可以添加新的组输入行，并且输入已设置其值，但该值不会显示在输入字段内。JSFiddle 链接：https://jsfiddle.net/joomquery/odgp2wre提前致谢(function($) {  $(document).ready(function() {    let passengersRows = $('.booking-passenger-entry');    let passengersRowsI = passengersRows.length;    $('.add-guest-as-passenger').on('click', function() {      let passengerData = {};      console.clear();      console.log(this);      passengerData.guestid = $(this).attr('data-guestid');      passengerData.passengerid = 0;      passengerData.lastname = $(this).attr('data-lastname');      passengerData.firstname = $(this).attr('data-firstname');      passengerData.passportid = $(this).attr('data-passportid');      passengerData.age = $(this).attr('data-age');      passengerData.gender = $(this).attr('data-gender');      addPassenger(passengerData);    });    function addPassenger(passenger) {      passengersRowsI++;      let i = passengersRowsI;      let container = $('#passengers-container');      let genderSelectOptionA = `<option value="0">Unspecified</option>`;      let genderSelectOptionB = `<option value="1">Male</option>`;      let genderSelectOptionC = `<option value="2">Female</option>`;      if (passenger.gender == 'Male') {        genderSelectOptionB = `<option value="1" selected>Male</option>`;      } else if (passenger.gender == 'Female') {        genderSelectOptionC = `<option value="2" selected>Female</option>`;      }      console.clear();      console.log(passenger);      let passengerTemplate = `  });

Answer 1

您已经快完成了，只需要做一项更改即可。

将输入元素中的属性名称从 更改val 为 。valuepassengerTemplate

(function($) {

  $(document).ready(function() {

    let passengersRows = $('.booking-passenger-entry');

    let passengersRowsI = passengersRows.length;

    $('.add-guest-as-passenger').on('click', function() {

      let passengerData = {};

      console.clear();

      console.log(this);

      passengerData.guestid = $(this).attr('data-guestid');

      passengerData.passengerid = 0;

      passengerData.lastname = $(this).attr('data-lastname');

      passengerData.firstname = $(this).attr('data-firstname');

      passengerData.passportid = $(this).attr('data-passportid');

      passengerData.age = $(this).attr('data-age');

      passengerData.gender = $(this).attr('data-gender');

      addPassenger(passengerData);

    });

    function addPassenger(passenger) {

      passengersRowsI++;

      let i = passengersRowsI;

      let container = $('#passengers-container');

      let genderSelectOptionA = `<option value="0">Unspecified</option>`;

      let genderSelectOptionB = `<option value="1">Male</option>`;

      let genderSelectOptionC = `<option value="2">Female</option>`;

      if (passenger.gender == 'Male') {

        genderSelectOptionB = `<option value="1" selected>Male</option>`;

      } else if (passenger.gender == 'Female') {

        genderSelectOptionC = `<option value="2" selected>Female</option>`;

      }

      console.clear();

      let passengerTemplate = `

            <div class="row-fluid booking-passenger-entry inputform" id="passengers-container-${i}" data-guestid="${passenger.guestid}" data-passengerid="">

                <input type="text" required id="input-name-last-${i}" name="passengers[${i}][name-last]" class="span3 b-guest-i input name-last" placeholder="Last name" value="John" >

                <input type="text" required id="input-name-first-${i}" name="passengers[${i}][name-first]" class="span3 b-guest-i input name-first" placeholder="First name" value="${passenger.firstname}" >

                <input type="text" required id="input-passport-${i}" name="passengers[${i}][passport]" class="span2 b-guest-i input passport" placeholder="Passport ID" value="${passenger.passportid}" >

                <input type="text" required id="input-age-${i}" name="passengers[${i}][age]" class="span1 b-guest-i input age" placeholder="Age" value="${passenger.age}" >

                <select id="input-gender-${i}" required name="passengers[${i}][gender]" class="span2 b-guest-i input gender">

                    ${genderSelectOptionA}

                    ${genderSelectOptionB}

                    ${genderSelectOptionC}

                </select>

                <div class="btn-group span1 pull-right">

                    <div id="passenger-delete" class="btn btn-danger"><i class="fa fa-minus-circle" aria-hidden="true"></i></div>

                </div>

                <input type="hidden" id="input-passengerid-${i}" name="passengers[${i}][passengerid]" class="hidden b-guest-i input" value="" >

                <input type="hidden" id="input-guestid-${i}" name="passengers[${i}][guestid]" class="hidden b-guest-i input" value="${passenger.guestid}" >

            </div>`;

      $(container).append(passengerTemplate);

    }

  });

})(jQuery);

.booking-passenger-entry {

    padding: 0.3125rem 0;

}

.booking-guest {

  margin: 1px 0;

  padding: 0.3125rem !important;

  line-height: 1rem;

  cursor: pointer;

  border-right: 1px solid #ddd;

  border-bottom: 1px solid #ddd;

  border-left: 1px solid #ddd;

}

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

<div id="booking-passengers" class="row-fluid req-passengers" style="">

  <div class="controls">

    <div class="passengerlist">

      <h3>Dynamic guestlist:</h3>

      <div class="row-fluid booking-guest booking-guest-headings">

        <span class="span3 b-guest-i b-guest-h name-last">Last name</span>

        <span class="span3 b-guest-i b-guest-h name-first">First name</span>

        <span class="span2 b-guest-i b-guest-h passport">Passport ID</span>

        <span class="span1 b-guest-i b-guest-h age">Age</span>

        <span class="span2 b-guest-i b-guest-h gender">Gender</span>

      </div>

      <div id="passengers-container" class="passengers-container" style="border:1px solid #aaa; min-height: 30px; background: #fafafa;">

      </div>

      <div class="guestlist">

        <h3>You may add passengers from your booking's guestlist</h3>

        <div class="row-fluid booking-guest booking-guest-headings">

          <span class="span3 b-guest-i b-guest-h name-last">Last name</span>

          <span class="span3 b-guest-i b-guest-h name-first">First name</span>

          <span class="span3 b-guest-i b-guest-h passport">Passport ID</span>

          <span class="span1 b-guest-i b-guest-h age">Age</span>

          <span class="span2 b-guest-i b-guest-h gender">Gender</span>

        </div>

        <div class="row-fluid booking-guest add-guest-as-passenger" id="booking-guest-8" data-guestid="8" data-passengerid="0" data-firstname="SomeoneF1" data-lastname="SomeoneL1" data-passportid="XX2255551" data-age="43" data-gender="Male">

          <span class="span3 b-guest-i name-last">SomeoneL1</span>

          <span class="span3 b-guest-i name-first">SomeoneF1</span>

          <span class="span3 b-guest-i passport">XX2255551</span>

          <span class="span1 b-guest-i age">43</span>

          <span class="span2 b-guest-i gender">Male</span>

        </div>

        <div class="row-fluid booking-guest add-guest-as-passenger" id="booking-guest-12" data-guestid="12" data-passengerid="0" data-firstname="SomeoneF2" data-lastname="SomeoneL2" data-passportid="XX0011221" data-age="41" data-gender="Unspecified">

          <span class="span3 b-guest-i name-last">SomeoneL2</span>

          <span class="span3 b-guest-i name-first">SomeoneF2</span>

          <span class="span3 b-guest-i passport">XX0011221</span>

          <span class="span1 b-guest-i age">41</span>

          <span class="span2 b-guest-i gender">Unspecified</span>

        </div>

      </div>

    </div>

  </div>

</div>

更新：由于id代码中的 是相同的并且无效，请考虑id通过分配索引来更改 ，例如，

   id="input-name-last-${i}"

   id="input-name-first-${i}"

Answer 2

我发现在这个例子中，更容易简单地将您想要的标记放入输入组中，隐藏它，然后为每个实例克隆它。我将把如何实际使用数据留给您，我还删除了所有 id，因此不会插入重复的 id。如果您需要 ID，您可以调整克隆标记来获取它们。

这样做的好处是您不必在代码中维护 HTML。

(function($) {

    let passengersRows = $('.booking-passenger-entry');

    let passengersRowsI = passengersRows.length;

    $('.add-guest-as-passenger').on('click', function() {

      let passengerData = {};

      passengerData.guestid = $(this).data('guestid');

      passengerData.passengerid = 0;

      passengerData.lastname = $(this).data('lastname');

      passengerData.firstname = $(this).data('firstname');

      passengerData.passportid = $(this).data('passportid');

      passengerData.age = $(this).data('age');

      passengerData.gender = $(this).data('gender');

      addPassenger(passengerData);

    });

    function addPassenger(passenger) {

      let container = $('#passengers-container');

      let inputGroups = container.find('.booking-passenger-entry');

      let clone = container.find('.hidden-input-group').first().clone(true);

      let i = inputGroups.length;

      // might want this>

      // passenger.passengerid = i;

      let gender = clone.find('.input.gender');

      if (passenger.gender == 'Male') {

        gender.val(1);

      } else if (passenger.gender == 'Female') {

        gender.val(2);;

      }

      clone.find('.name-first').val(passenger.firstname);

      clone.find('.name-last').val(passenger.lastname);

      clone.data('guestid', passenger.guestid);

      clone.data('passengerid', passenger.passengerid);

      clone.find('.input.passport').val(passenger.passportid);

      clone.find('.input.age').val(passenger.age);

      clone.removeClass("hidden-input-group");

      container.append(clone);

    }

})(jQuery);

.booking-passenger-entry {

  padding: 0.3125rem 0;

}

.booking-guest {

  margin: 1px 0;

  padding: 0.3125rem !important;

  line-height: 1rem;

  cursor: pointer;

  border-right: 1px solid #ddd;

  border-bottom: 1px solid #ddd;

  border-left: 1px solid #ddd;

}

.hidden-input-group {

  display: none;

}

#passengers-container {

  border: 1px solid #aaa;

  min-height: 50px;

}

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

<div id="booking-passengers" class="row-fluid req-passengers" style="">

  <div class="controls">

    <div class="passengerlist">

      <h3>Dynamic guestlist:</h3>

      <div class="row-fluid booking-guest booking-guest-headings">

        <span class="span3 b-guest-i b-guest-h name-last">Last name</span>

        <span class="span3 b-guest-i b-guest-h name-first">First name</span>

        <span class="span2 b-guest-i b-guest-h passport">Passport ID</span>

        <span class="span1 b-guest-i b-guest-h age">Age</span>

        <span class="span2 b-guest-i b-guest-h gender">Gender</span>

      </div>

      <div id="passengers-container" class="passengers-container">

        <div class="row-fluid booking-passenger-entry inputform hidden-input-group" data-guestid="" data-passengerid="">

          <input type="text" required data-name="" class="span3 b-guest-i input name-last " placeholder="Last name" />

          <input type="text" required class="span3 b-guest-i input name-first" placeholder="First name" />

          <input type="text" required class="span2 b-guest-i input passport" placeholder="Passport ID" />

          <input type="text" required class="span1 b-guest-i input age" placeholder="Age" />

          <select required class="span2 b-guest-i input gender">

            <option value="0">Unspecified</option>

            <option value="1">Male</option>

            <option value="2">Female</option>

          </select>

          <div class="btn-group span1 pull-right">

            <div class="passenger-delete btn btn-danger"><i class="fa fa-minus-circle" aria-hidden="true"></i></div>

          </div>

          <input type="hidden" class="hidden b-guest-i input" />

          <input type="hidden" class="hidden b-guest-i input" />

        </div>

      </div>

      <div class="guestlist">

        <h3>You may add passengers from your booking's guestlist</h3>

        <div class="row-fluid booking-guest booking-guest-headings">

          <span class="span3 b-guest-i b-guest-h name-last">Last name</span>

          <span class="span3 b-guest-i b-guest-h name-first">First name</span>

          <span class="span3 b-guest-i b-guest-h passport">Passport ID</span>

          <span class="span1 b-guest-i b-guest-h age">Age</span>

          <span class="span2 b-guest-i b-guest-h gender">Gender</span>

        </div>

        <div class="row-fluid booking-guest add-guest-as-passenger" id="booking-guest-8" data-guestid="8" data-passengerid="0" data-firstname="SomeoneF1" data-lastname="SomeoneL1" data-passportid="XX2255551" data-age="43" data-gender="Male">

          <span class="span3 b-guest-i name-last">SomeoneL1</span>

          <span class="span3 b-guest-i name-first">SomeoneF1</span>

          <span class="span3 b-guest-i passport">XX2255551</span>

          <span class="span1 b-guest-i age">43</span>

          <span class="span2 b-guest-i gender">Male</span>

        </div>

        <div class="row-fluid booking-guest add-guest-as-passenger" id="booking-guest-12" data-guestid="12" data-passengerid="0" data-firstname="SomeoneF2" data-lastname="SomeoneL2" data-passportid="XX0011221" data-age="41" data-gender="Unspecified">

          <span class="span3 b-guest-i name-last">SomeoneL2</span>

          <span class="span3 b-guest-i name-first">SomeoneF2</span>

          <span class="span3 b-guest-i passport">XX0011221</span>

          <span class="span1 b-guest-i age">41</span>

          <span class="span2 b-guest-i gender">Unspecified</span>

        </div>

      </div>

    </div>

  </div>

</div>