0

我试图循环一个数组来创建一些表单标签，这取决于数组中有多少个值。到目前为止，我已经获得了正在创建的标签和输入标签。我遇到的问题是在标签之后正确显示输入标签。任何帮助将非常感激！

我正在努力实现：

<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">
4

4 回答 4

1

您正在做的错误是将这些元素附加到元素之后.material-label。因此，您继续在已经具有该类的标签之后添加它们。

从 ：

$('.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>

于 2015-05-01T19:59:10.853 回答
1

jQuery 语句$('.material-label')选择具有该类的每个元素，因此当您使用 时$('.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);

会得到你想要的结果。

于 2015-05-01T20:05:31.783 回答
0

将“.material-label”更改为 matLabel

$(matLabel).after(matInput);

这是 JSFiddle：https ://jsfiddle.net/82o6hfna/

于 2015-05-01T19:59:28.607 回答
0

我从不喜欢构建 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>

http://jsfiddle.net/qcmdnd4d/

于 2015-05-01T20:09:52.243 回答