英文:
Set value of input control from input_group
问题
我正在尝试使用 $input_group.find('input'); 来设置此输入控件，但它没有被设置。这是使用 find 并设置输入控件的正确方式吗，还是有其他方法可以做到这一点？
var $container = $('#gridrow-field-container');
var template = $('#gridrow-template-input-group').get(0);
$(item.MeetingPollingPartsValues).each((indexPartsValues, PartsValues) => {
var $input_group = $(template.content.cloneNode(true));
var inputControl = $input_group.find('input');
inputControl.val(PartsValues.QuestionValue);
console.log(inputControl);
console.log($input_group);
$container.append($input_group);
$('input_group').val(PartsValues.QuestionValue);
});
<template id="gridrow-template-input-group">
<div class='row mb-3' id='newrowItem_1'>
<div class="input-group">
<input type='text' id='fieldrowItem_1' name='name[]' class='form-control fieldrowItem mb-3' placeholder="Row 1" data-value="0" >
<span id='spanrowItem_1' class="input-group-addon" style="cursor:pointer;" onclick="RemoveRow(this)" >
<i class="fa fa-remove" style="color:#CDCDCD"></i>
</span>
</div>
</div>
</template>
英文:
I am trying to set this input control using $input_group.find('input'); but it is not getting set. Is this the correct way to use find and then set the value of the input control or is there anyway to do this?
var $container = $('#gridrow-field-container');
var template = $('#gridrow-template-input-group').get(0);
$(item.MeetingPollingPartsValues).each((indexPartsValues, PartsValues) => {
var $input_group = $(template.content.cloneNode(true));
var inputControl = $input_group.find('input');
inputControl.val(PartsValues.QuestionValue);
console.log(inputControl);
console.log($input_group);
$container.append($input_group);
$('input_group').val(PartsValues.QuestionValue);
});
<template id="gridrow-template-input-group">
<div class='row mb-3' id='newrowItem_1'>
<div class="input-group">
<input type='text' id='fieldrowItem_1' name='name[]' class='form-control fieldrowItem mb-3' placeholder="Row 1" data-value="0" >
<span id='spanrowItem_1' class="input-group-addon" style="cursor:pointer;" onclick="RemoveRow(this)" >
<i class="fa fa-remove" style="color:#CDCDCD"></i>
</span>
</div>
</div>
</template>
答案1
得分: 2
我添加了Bootstrap 5的依赖项并修复了模板。
您可以使用以下代码克隆模板的内容：
const $inputGroup = $template.contents().clone();
<link href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.0/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-9ndCyUaIbzAi2FUVXJi0CjmCapSmO7SnpJef0486qhLnuZ2cdeRhO02iuK6FUUVM" crossorigin="anonymous">
<link href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.4.0/css/all.min.css" rel="stylesheet"/>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<script src="https://cdn.jsdelivr.net/npm/bootstrap@5.3.0/dist/js/bootstrap.bundle.min.js" integrity="sha384-geWF76RCwLtnZ8qwWowPQNguL3RmwHVBC9FhGdlKrxdiJJigb/j/68SIy3Te4Bkz" crossorigin="anonymous"></script>
<template id="gridrow-template-input-group">
<div class="row">
<div class="input-group mb-3">
<input type="text" name="name[]" class="form-control"
placeholder="Row x" data-value="0" >
<div class="input-group-text" style="cursor:pointer;" onclick="RemoveRow(this)">
<i class="fa fa-remove" style="color:#CDCDCD"></i>
</div>
</div>
</div>
</template>
<div id="gridrow-field-container" class="container"></div>
请注意，我没有翻译代码部分，只翻译了代码之外的文本。
英文:
I added Bootstrap 5 dependencies and fixed the template.
You can clone the contents of the template with:
const $inputGroup = $template.contents().clone();
<!-- begin snippet: js hide: false console: true babel: false -->
<!-- language: lang-js -->
const $container = $('#gridrow-field-container');
const $template = $('#gridrow-template-input-group');
const RemoveRow = (span) => {
$(span).closest('.row').remove();
}
const item = {
MeetingPollingPartsValues: [
{ QuestionValue: 'One' },
{ QuestionValue: 'Two' },
{ QuestionValue: 'Three' }
]
};
$(item.MeetingPollingPartsValues).each((index, partValue) => {
const $inputGroup = $template.contents().clone();
const $inputControl = $inputGroup.find('input');
$inputControl.val(partValue.QuestionValue);
$inputControl.attr('placeholder', `Row ${index + 1}`);
$inputControl.attr('data-value', partValue.QuestionValue);
$container.append($inputGroup);
});
<!-- language: lang-html -->
<link href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.0/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-9ndCyUaIbzAi2FUVXJi0CjmCapSmO7SnpJef0486qhLnuZ2cdeRhO02iuK6FUUVM" crossorigin="anonymous">
<link href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.4.0/css/all.min.css" rel="stylesheet"/>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<script src="https://cdn.jsdelivr.net/npm/bootstrap@5.3.0/dist/js/bootstrap.bundle.min.js" integrity="sha384-geWF76RCwLtnZ8qwWowPQNguL3RmwHVBC9FhGdlKrxdiJJigb/j/68SIy3Te4Bkz" crossorigin="anonymous"></script>
<template id="gridrow-template-input-group">
<div class="row">
<div class="input-group mb-3">
<input type="text" name="name[]" class="form-control"
placeholder="Row x" data-value="0" >
<div class="input-group-text" style="cursor:pointer;" onclick="RemoveRow(this)">
<i class="fa fa-remove" style="color:#CDCDCD"></i>
</div>
</div>
</div>
</template>
<div id="gridrow-field-container" class="container"></div>
<!-- end snippet -->
通过集体智慧和协作来改善编程学习和解决问题的方式。致力于成为全球开发者共同参与的知识库，让每个人都能够通过互相帮助和分享经验来进步。
评论