从 JS 文字模板动态生成的输入字段：输入值不显示
Dynamically generated Input fields from a JS literal template: input values do not display
我已经解决了这个问题，如果有任何帮助，我将不胜感激 - 这可能是显而易见的，但目前我看不出问题所在。
一些上下文：
我正在动态添加一个 "group" 字段，用于描述一个人的表单。
对于一个全新的条目，这些字段可以为空，或者用户可以 select 来自现有人员（描述为客人）的列表，我在 div 中显示了该列表。
用户可以单击这些来宾 div 中的每一个并添加一行新的组输入，其中输入值已设置。
这是我遇到的问题。我能够添加新的组输入行并且输入设置了它们的值，但该值未显示在输入字段中。
JSFiddle Link: 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 = `
<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" val="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" val="${passenger.firstname}" >
<input type="text" required id="input-passport-${i}" name="passengers[${i}][passport]" class="span2 b-guest-i input passport" placeholder="Passport ID" val="${passenger.passportid}" >
<input type="text" required id="input-age-${i}" name="passengers[${i}][age]" class="span1 b-guest-i input age" placeholder="Age" val="${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-${i}" 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" val="" >
<input type="hidden" id="input-guestid-${i}" name="passengers[${i}][guestid]" class="hidden b-guest-i input" val="${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>
您快完成了，只需要做一处更改。
更改 passengerTemplate 输入元素中的属性名称 val 到 value。
(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}"
我发现在这个例子中，简单地将你想要的标记放入输入组、隐藏它然后为每个实例克隆它更容易。我将留给您实际使用数据的方式，我还删除了所有 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>
我已经解决了这个问题，如果有任何帮助，我将不胜感激 - 这可能是显而易见的，但目前我看不出问题所在。
一些上下文：
我正在动态添加一个 "group" 字段，用于描述一个人的表单。 对于一个全新的条目，这些字段可以为空，或者用户可以 select 来自现有人员（描述为客人）的列表，我在 div 中显示了该列表。 用户可以单击这些来宾 div 中的每一个并添加一行新的组输入，其中输入值已设置。
这是我遇到的问题。我能够添加新的组输入行并且输入设置了它们的值，但该值未显示在输入字段中。
JSFiddle Link: 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 = `
<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" val="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" val="${passenger.firstname}" >
<input type="text" required id="input-passport-${i}" name="passengers[${i}][passport]" class="span2 b-guest-i input passport" placeholder="Passport ID" val="${passenger.passportid}" >
<input type="text" required id="input-age-${i}" name="passengers[${i}][age]" class="span1 b-guest-i input age" placeholder="Age" val="${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-${i}" 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" val="" >
<input type="hidden" id="input-guestid-${i}" name="passengers[${i}][guestid]" class="hidden b-guest-i input" val="${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>
您快完成了，只需要做一处更改。
更改 passengerTemplate 输入元素中的属性名称 val 到 value。
(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}"
我发现在这个例子中，简单地将你想要的标记放入输入组、隐藏它然后为每个实例克隆它更容易。我将留给您实际使用数据的方式，我还删除了所有 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>