遍历数组并在标签后创建表单输入标签
Loop over an array and create form input tags after labels
我正在尝试遍历数组以创建一些表单标签,具体取决于数组中有多少个值。到目前为止,我已经获得了正在创建的标签和输入标签。我遇到的问题是在标签后正确显示输入标签。任何帮助将不胜感激!
我正在努力实现:
<label class="material-label" for="leather_materials">
<input id="leather_materials" class="shoe-materials" type="radio" name="materials" value="leather">
<label class="material-label" for="suade_materials">
<input id="suade_materials" class="shoe-materials" type="radio" name="materials" value="suade">
<label class="material-label" for="nubuck_materials">
<input id="nubuck_materials" class="shoe-materials" type="radio" name="materials" value="nubuck">
到目前为止我的代码:
materialArray = ['leather','suade','nubuck'];
//loop over material array
for( i = 0; i < materialArray.length; i++) {
//create label elements
var matLabel = document.createElement('label');
matLabel.setAttribute('for', materialArray[i] + '_materials');
matLabel.setAttribute('class', 'material-label');
console.log(matLabel);
//add text to label elements
var matLabelTextNode = document.createTextNode(materialArray[i]);
matLabel.appendChild(matLabelTextNode);
//create input elements
var matInput = document.createElement('input');
matInput.className = 'shoe-materials';
matInput.setAttribute('class', 'shoe-materials');
matInput.setAttribute('id', materialArray[i] +'_materials');
matInput.setAttribute('name', 'materials');
matInput.setAttribute('type', 'radio');
matInput.setAttribute('value', materialArray[i]);
console.log(matInput);
//append to parent div
addMaterials.appendChild(matLabel);
$('.material-label').after(matInput);
}
我尝试使用 jQuery after() 但它有点混乱并得到以下结果
<label class="material-label" for="leather_materials">leather</label>
<input id="nubuck_materials" class="shoe-materials" type="radio" name="materials" value="nubuck">
<input id="suade_materials" class="shoe-materials" type="radio" name="materials" value="suade">
<input id="leather_materials" class="shoe-materials" type="radio" name="materials" value="leather">
<label class="material-label" for="suade_materials">suade</label>
<input id="nubuck_materials" class="shoe-materials" type="radio" name="materials" value="nubuck">
<input id="suade_materials" class="shoe-materials" type="radio" name="materials" value="suade">
<label class="material-label" for="nubuck_materials">nubuck</label>
<input id="nubuck_materials" class="shoe-materials" type="radio" name="materials" value="nubuck">
您犯的错误是将这些元素附加在 .material-label
元素之后。所以你在已经有 class.
的标签之后继续添加它们
发件人:
$('.material-label').after(matInput);
收件人:
$(matLabel).after(matInput);
更新代码:
var addMaterials = document.getElementById("addMaterials");
materialArray = ['leather','suade','nubuck'];
//loop over material array
for( i = 0; i < materialArray.length; i++) {
//create label elements
var matLabel = document.createElement('label');
matLabel.setAttribute('for', materialArray[i] + '_materials');
matLabel.setAttribute('class', 'material-label');
console.log(matLabel);
//add text to label elements
var matLabelTextNode = document.createTextNode(materialArray[i]);
matLabel.appendChild(matLabelTextNode);
//create input elements
var matInput = document.createElement('input');
matInput.className = 'shoe-materials';
matInput.setAttribute('class', 'shoe-materials');
matInput.setAttribute('id', materialArray[i] +'_materials');
matInput.setAttribute('name', 'materials');
matInput.setAttribute('type', 'radio');
matInput.setAttribute('value', materialArray[i]);
console.log(matInput);
//append to parent div
addMaterials.appendChild(matLabel);
$(matLabel).after(matInput);
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div id="addMaterials"></div>
将'.material-label'更改为matLabel
$(matLabel).after(matInput);
这是 JSFiddle:https://jsfiddle.net/82o6hfna/
jQuery 语句 $('.material-label')
选择具有 class 的每个元素,因此当您使用 $('.material-label').after(matInput)
时,您是在三个元素中的每一个之后添加 matInput 的内容标签。
要获取当前标签,只需使用i
作为$('.material-label')
返回数组的索引。
改变
//append to parent div
addMaterials.appendChild(matLabel);
$('.material-label').after(matInput);
到
//append to parent div
currentLabel = $('.material-label')[i];
$(currentLabel).after(matInput);
会得到你想要的结果。
我从不喜欢构建对象的操作方法 html。我喜欢构建 html 的字符串,然后将其插入 dom。只是我的意见。
JS
//to uppercase of first letter only
String.prototype.toUpperCaseFirstLetter = function() {
var s = this;
return s.length > 0 ? s.charAt(0).toUpperCase() + s.slice(1) : s;
}
var materialArray = ['leather','suade','nubuck'];
function buildMaterialRadios () {
var str = '';
for (var i = 0; i < materialArray.length; i++) {
var item = materialArray[i];
str += '<label class="material-label" for="'+item+'_materials">'+item.toUpperCaseFirstLetter()+'</label><input id="'+item+'_materials" class="shoe-materials" type="radio" name="materials" value="'+item+'">';
};
document.getElementById('material_selections').innerHTML = str;
}
buildMaterialRadios();
HTML
<form name="shoebuilderform">
<div id="material_selections"></div>
</form>
我正在尝试遍历数组以创建一些表单标签,具体取决于数组中有多少个值。到目前为止,我已经获得了正在创建的标签和输入标签。我遇到的问题是在标签后正确显示输入标签。任何帮助将不胜感激!
我正在努力实现:
<label class="material-label" for="leather_materials">
<input id="leather_materials" class="shoe-materials" type="radio" name="materials" value="leather">
<label class="material-label" for="suade_materials">
<input id="suade_materials" class="shoe-materials" type="radio" name="materials" value="suade">
<label class="material-label" for="nubuck_materials">
<input id="nubuck_materials" class="shoe-materials" type="radio" name="materials" value="nubuck">
到目前为止我的代码:
materialArray = ['leather','suade','nubuck'];
//loop over material array
for( i = 0; i < materialArray.length; i++) {
//create label elements
var matLabel = document.createElement('label');
matLabel.setAttribute('for', materialArray[i] + '_materials');
matLabel.setAttribute('class', 'material-label');
console.log(matLabel);
//add text to label elements
var matLabelTextNode = document.createTextNode(materialArray[i]);
matLabel.appendChild(matLabelTextNode);
//create input elements
var matInput = document.createElement('input');
matInput.className = 'shoe-materials';
matInput.setAttribute('class', 'shoe-materials');
matInput.setAttribute('id', materialArray[i] +'_materials');
matInput.setAttribute('name', 'materials');
matInput.setAttribute('type', 'radio');
matInput.setAttribute('value', materialArray[i]);
console.log(matInput);
//append to parent div
addMaterials.appendChild(matLabel);
$('.material-label').after(matInput);
}
我尝试使用 jQuery after() 但它有点混乱并得到以下结果
<label class="material-label" for="leather_materials">leather</label>
<input id="nubuck_materials" class="shoe-materials" type="radio" name="materials" value="nubuck">
<input id="suade_materials" class="shoe-materials" type="radio" name="materials" value="suade">
<input id="leather_materials" class="shoe-materials" type="radio" name="materials" value="leather">
<label class="material-label" for="suade_materials">suade</label>
<input id="nubuck_materials" class="shoe-materials" type="radio" name="materials" value="nubuck">
<input id="suade_materials" class="shoe-materials" type="radio" name="materials" value="suade">
<label class="material-label" for="nubuck_materials">nubuck</label>
<input id="nubuck_materials" class="shoe-materials" type="radio" name="materials" value="nubuck">
您犯的错误是将这些元素附加在 .material-label
元素之后。所以你在已经有 class.
发件人:
$('.material-label').after(matInput);
收件人:
$(matLabel).after(matInput);
更新代码:
var addMaterials = document.getElementById("addMaterials");
materialArray = ['leather','suade','nubuck'];
//loop over material array
for( i = 0; i < materialArray.length; i++) {
//create label elements
var matLabel = document.createElement('label');
matLabel.setAttribute('for', materialArray[i] + '_materials');
matLabel.setAttribute('class', 'material-label');
console.log(matLabel);
//add text to label elements
var matLabelTextNode = document.createTextNode(materialArray[i]);
matLabel.appendChild(matLabelTextNode);
//create input elements
var matInput = document.createElement('input');
matInput.className = 'shoe-materials';
matInput.setAttribute('class', 'shoe-materials');
matInput.setAttribute('id', materialArray[i] +'_materials');
matInput.setAttribute('name', 'materials');
matInput.setAttribute('type', 'radio');
matInput.setAttribute('value', materialArray[i]);
console.log(matInput);
//append to parent div
addMaterials.appendChild(matLabel);
$(matLabel).after(matInput);
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div id="addMaterials"></div>
将'.material-label'更改为matLabel
$(matLabel).after(matInput);
这是 JSFiddle:https://jsfiddle.net/82o6hfna/
jQuery 语句 $('.material-label')
选择具有 class 的每个元素,因此当您使用 $('.material-label').after(matInput)
时,您是在三个元素中的每一个之后添加 matInput 的内容标签。
要获取当前标签,只需使用i
作为$('.material-label')
返回数组的索引。
改变
//append to parent div
addMaterials.appendChild(matLabel);
$('.material-label').after(matInput);
到
//append to parent div
currentLabel = $('.material-label')[i];
$(currentLabel).after(matInput);
会得到你想要的结果。
我从不喜欢构建对象的操作方法 html。我喜欢构建 html 的字符串,然后将其插入 dom。只是我的意见。
JS
//to uppercase of first letter only
String.prototype.toUpperCaseFirstLetter = function() {
var s = this;
return s.length > 0 ? s.charAt(0).toUpperCase() + s.slice(1) : s;
}
var materialArray = ['leather','suade','nubuck'];
function buildMaterialRadios () {
var str = '';
for (var i = 0; i < materialArray.length; i++) {
var item = materialArray[i];
str += '<label class="material-label" for="'+item+'_materials">'+item.toUpperCaseFirstLetter()+'</label><input id="'+item+'_materials" class="shoe-materials" type="radio" name="materials" value="'+item+'">';
};
document.getElementById('material_selections').innerHTML = str;
}
buildMaterialRadios();
HTML
<form name="shoebuilderform">
<div id="material_selections"></div>
</form>