以下代码生成
的输出苹果，桔子 切片，切丁 Option1 Option2 Option3 Option4，Option1 Option2 Option3 Option4
我希望输出为
苹果 切片 选项1选项2选项3选项4
橙 切丁 选项1选项2选项3选项4
addOptions（）从表单创建数组，showOptions（）用数组替换元素。
为了实现这种输出需要改变什么？请参阅此代码段
var fruit
var prep
var saladsArr = [];
var salad = {
"theFruit": []
, "thePrep": []
, "theOpt": []
};
function clickFruit() {
fruit = document.getElementById('theTable').theFruitRad.value;
console.log(fruit);
}
function clickPrep() {
prep = document.getElementById('theTable').thePrepRad.value;
console.log(prep);
}
// Create Arrays
function addOrder() {
addOptions(document.getElementById('theTable'));
}
function addOptions(frm) {
var buffTop = "";
for (var i in frm.theFruitRad) {
if (frm.theFruitRad[i].checked) salad.theFruit.push(frm.theFruitRad[i].value);
}
for (var i in frm.thePrepRad) {
if (frm.thePrepRad[i].checked) salad.thePrep.push(frm.thePrepRad[i].value);
}
for (var i in frm.chkbox) {
if (frm.chkbox[i].checked) {
buffTop += frm.chkbox[i].value + " "
}
}
salad.theOpt.push(buffTop);
console.log(saladsArr.length);
saladsArr.push(salad);
resetForms();
}
function showOptions(frm) {
for (var i = 0; i < saladsArr.length; i++) {
var salad = saladsArr[i];
var html_salad = "<div class='resFruit" + [i] + "'>" + salad.theFruit + "</div>";
html_salad += "<div class='resPrep" + [i] + "'>" + salad.thePrep + "</div>";
html_salad += "<div class='resOpt" + [i] + "'>" + salad.theOpt + "</div><br>";
}
document.getElementById('finResults').innerHTML = html_salad;
}
function test() {
console.log(salad);
console.log(salad.theFruit);
console.log(salad.thePrep);
console.log(salad.theOpt);
}
function resetForms() {
document.getElementById("theTable").reset();
} div{
background:white;
}
.resFruit {
height: auto;
background: yellow;
color: black;
width: auto;
}
.resPrep {
height: auto;
background: green;
color: black;
width: auto;
}
.resOpt {
height: auto;
background: orange;
color: black;
width: auto;
}
table {
color: white;
}
#left {
background: red;
width: 50%;
height: 100%;
float: left;
color: white;
}
#right {
background: blue;
width: 50%;
height: 100%;
float: left;
color: white;
}
#inputButton {
vertical-align: bottom;
}<html>
<head>
<title></title>
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel=stylesheet type="text/css" href="temp.css" />
<script type="text/javascript" src="https://code.jquery.com/jquery-3.2.1.min.js"></script>
<script type="text/javascript" src="temp1.js"></script>
</head>
<body bgcolor="#FFFFFF" leftmargin="0" topmargin="0" marginwidth="0" marginheight="0">
<div id="left">
<form id="theTable"> <b><u>Fruit</u></b>
<br>
<label class="rad">
<input required required type="radio" name="theFruit" id="theFruitRad" onclick="clickFruit()" value="Apple" /><i></i> Apple</label>
<br>
<label class="rad">
<input required type="radio" name="theFruit" id="theFruitRad" onclick="clickFruit()" value="Orange" /> <i></i> Orange</label>
<br>
<label class="rad">
<input required type="radio" name="theFruit" id="theFruitRad" onclick="clickFruit()" value="Banana" /> <i></i> Banana</label>
<br>
<label class="rad">
<input required type="radio" name="theFruit" id="theFruitRad" onclick="clickFruit()" value="Pear" /> <i></i> Pear</label>
<br> <b><u><br>Prep</u></b>
<br>
<label class="rad">
<input type="radio" name="prep" id="thePrepRad" onclick="clickPrep()" value="Sliced" /> <i></i> Sliced</label>
<br>
<label class="rad">
<input type="radio" name="prep" id="thePrepRad" onclick="clickPrep()" value="Diced" /> <i></i> Diced</label>
<br>
<label class="rad">
<input type="radio" name="prep" id="thePrepRad" onclick="clickPrep()" value="Peeled" /> <i></i> Peeled</label>
<br>
<label class="rad">
<input type="radio" name="prep" id="thePrepRad" onclick="clickPrep()" value="Whole" /> <i></i> Whole</label>
<br> <b><u>Options</u></b><br>
<label class="ckb">
<input type="checkbox" name="chkbox1" id="chkbox" value="Option1" /> <i></i> Option1</label>
<br>
<label class="ckb">
<input type="checkbox" name="chkbox1" id="chkbox" value="Option2" /> <i></i> Option2</label>
<br>
<label class="ckb">
<input type="checkbox" name="chkbox1" id="chkbox" value="Option3" /> <i></i> Option3</label>
<Br>
<label class="ckb">
<input type="checkbox" name="chkbox1" id="chkbox" value="Option4" /> <i></i> Option4</label>
</Br>
</form>
</div>
<div id="right">
<div id="finResults"></div>
<center>
<input id="inputButton" type="button" value="Add" onClick="addOrder()" />
<input id="inputButton" type="button" value="test" onClick="test()" />
<input id="inputButton" type="button" value="Show Results" onClick="showOptions(document.getElementById('theTable'))" /> </center>
</div>
</body>
</html>
答案 0 :(得分：0)
为了获得所需的输出，您只需要在for函数中添加test循环，如下所示：
function test() {
console.log(salad);
for(var i = 0; i < salad.theFruit.length; i++) {
console.log(salad.theFruit[i] || '');
console.log(salad.thePrep[i] || '');
console.log(salad.theOpt[i] || '');
console.log('');
}
}
希望这就是你想要的。
打印数组时，它会一次打印所有元素，用逗号分隔。在您的代码中就是这种情况，一次打印所有水果，然后是preps和opts。
添加一个循环，我们一次在所有3个数组的特定索引处打印元素。因此，打印第一个位置的fruits数组中的元素，然后是preps数组中的第一个元素和opts数组。然后是所有3个数组的第二个位置的元素，依此类推。