为数组中的每个对象创建一个输入和标签

Question

我在数组中填充了成分列表。我需要为数组中的每个对象（只是“名称”对象）动态创建一个复选框和标签组合

这是我要为数组中的每个对象创建的代码

<div class="column">
<label for="Doughnuts">Doughnuts</label>
<input type="checkbox" name = "Doughnuts">
</div>

我需要为数组中的每个对象复制该代码片段

我还将如何将复选框值放入数组以供以后使用

https://codepen.io/humzaysf/pen/QozzXE

Answer 1

您可以执行以下操作：

const AvailableToppings = [
  {Name: "Pepperoni",ExtraPrice: 0.75},
  {Name: "Tomatoes", ExtraPrice: 0.70},
  {Name: "Anchovies", ExtraPrice: 0.60},
  {Name: "Mushroom", ExtraPrice: 0.50},
  {Name: "Garlic", ExtraPrice: 0.80},
  {Name: "Pinapple", ExtraPrice: 1.00},
  {Name: "Turkey Ham", ExtraPrice: 1.00},
  {Name: "Spicy Beef", ExtraPrice: 1.50},
  {Name: "Spicy Chicken", ExtraPrice: 1.50},
  {Name: "Jalapenos", ExtraPrice: 0.50}
];

let inputs = document.createElement("span");
inputs.innerHTML = AvailableToppings.map(item => `<div class="column">
  <label for="${item.Name}">${item.Name}</label>
  <input type="checkbox" name="${item.Name}" value="${item.ExtraPrice}">
</div>`).join('');
document.getElementById('checkBoxContainer').appendChild(inputs);

/* CSS Document */

* {
  margin: 0;
  padding: 0;
  box-sizing: border-box;
  font-family: 'Permanent Marker', cursive;
}

body {
  height: 100vh;
}

h1 {
  font-family: 'Alfa Slab One', cursive;
  letter-spacing: 5px
}

.grid {
  display: flex;
  flex-wrap: wrap;
  text-align: center;
  margin: -1em 0 1em -1em;
}

.grid-item {
  flex: 1;
  padding: 1em 0 0 1em;
  margin-top: auto;
  margin-bottom: auto;
}


/*Ignore above*/

.modal-bb {
  position: relative;
  height: 100%;
}

.modal-bb-contents {
  width: 90%;
  height: 80%;
  overflow: auto;
  margin: auto;
  position: absolute;
  top: 0;
  left: 0;
  bottom: 0;
  right: 0;
  border: solid black;
  text-align: center;
  padding: 3vh 3vh;
}

#button-container {
  display: flex;
  justify-content: right;
  /* align horizontal */
  align-items: center;
  /* align vertical */
  border: thin #6A2021 groove;
  padding-left: 2%;
}

#Ingrediants-button {
  background: none;
  border: none;
  color: rgb(196, 19, 19);
  font-size: 8vh;
  font-family: 'Permanent Marker', cursive;
  cursor: pointer;
}

.expander-toggle {
  font-size: 10vh;
  padding: 0vh 10vw;
  cursor: pointer;
}


/* Create three equal columns that floats next to each other */

.column {
  float: left;
  width: 33.33%;
  padding: 10vh;
  height: auto;
}


/* Clear floats after the columns */

.row:after {
  display: table;
  clear: both;
}

.ingre-chkbox {
  display: block;
}

<div class="modal-bb">
  <!-- Container for modal-box -->
  <div class="modal-bb-contents">
    <!-- modal-box -->
    <div id="button-container">
      <p class="expander-toggle">+</p>
      <button id="Ingrediants-button">Choose Bread</button>
    </div>
    <!-- Should probably have an ID -->
    <div id="checkBoxContainer" class="ingre-chkbox"></div>
  </div>
</div>

希望这会有所帮助，

Answer 2

AngularJs库具有ng-repeat来显示数组。但是在纯Java中，您必须为对象数组更新DOM。

Answer 3

var AvailableToppings = [
  {Name: "Pepperoni",ExtraPrice: 0.75},
  {Name: "Tomatoes", ExtraPrice: 0.70},
  {Name: "Anchovies", ExtraPrice: 0.60},
  {Name: "Mushroom", ExtraPrice: 0.50},
  {Name: "Garlic", ExtraPrice: 0.80},
  {Name: "Pinapple", ExtraPrice: 1.00},
  {Name: "Turkey Ham", ExtraPrice: 1.00},
  {Name: "Spicy Beef", ExtraPrice: 1.50},
  {Name: "Spicy Chicken", ExtraPrice: 1.50},
  {Name: "Jalapenos", ExtraPrice: 0.50}
];

var ingreChkboxes = document.getElementById('ingre-chkboxes');

AvailableToppings.map((AvailableTopping, index) => {
  var Name = AvailableTopping.Name;
  var parentDiv = document.createElement('div');
  parentDiv.setAttribute('class', 'column');

  var Label = document.createElement('label');
  Label.setAttribute('for', Name);
  var Node = document.createTextNode(Name + " ");
  Label.appendChild(Node);

  var Input = document.createElement('input');
  Input.setAttribute('type', 'checkbox');
  Input.setAttribute('name', Name);

  parentDiv.appendChild(Label).appendChild(Input);

  ingreChkboxes.appendChild(parentDiv);
});

function submitToppings() {
    var chosenOptions = [];
    var options = document.querySelectorAll("#ingre-chkboxes input[type=checkbox]");

    options.forEach((option) => {
       if(option.checked) {
           chosenOptions.push(option.getAttribute('name'));
       }
    });

    alert(chosenOptions);
}

/* CSS Document */


*{
    margin: 0;
    padding: 0;
    box-sizing: border-box;
    font-family: 'Permanent Marker', cursive;
}

body {
    height: 100vh;

}

h1{
    font-family: 'Alfa Slab One', cursive;
    letter-spacing: 5px
}


	.grid {
    display: flex;
    flex-wrap: wrap;
    text-align: center;
		margin: -1em 0 1em -1em;
  }
  .grid-item {
    flex: 1;
		padding: 1em 0 0 1em;
		margin-top: auto;
		margin-bottom: auto;
  }


/*Ignore above*/



.modal-bb {
	position: relative;
	height: 100%;
}

.modal-bb-contents {
	width: 90%;
	height: 80%;
	overflow: auto;
	margin: auto;
	position: absolute;
	top: 0; left: 0; bottom: 0; right: 0;
	border: solid black;
	text-align: center;
	padding: 3vh 3vh;
}

#button-container {
	display: flex;
	justify-content: right; /* align horizontal */
	align-items: center; /* align vertical */
	border: thin #6A2021 groove;
	padding-left: 2%;
}


#Ingrediants-button {
	background: none;
    border:  none;
    color: rgb(196, 19, 19);
    font-size: 8vh;
    font-family: 'Permanent Marker', cursive;
    cursor: pointer;	
}

.expander-toggle {
	font-size: 10vh;
	padding: 0vh  10vw;
	cursor: pointer;
}

/* Create three equal columns that floats next to each other */
.column {
  float: left;
  width: 33.33%;
  padding: 10vh;
  height: auto; 
	
}


/* Clear floats after the columns */
.row:after {

  display: table;
  clear: both;
}

.ingre-chkbox {
	display: block;
}

<div class="modal-bb">  <!-- Container for modal-box -->
	<div class="modal-bb-contents">	<!-- modal-box -->
		<div id = "button-container">
			<p class="expander-toggle">+</p>
			<button id="Ingrediants-button">Choose Bread</button>				
	  	</div>
		<div class="ingre-chkbox" id="ingre-chkboxes">
		</div>
        <button onClick="submitToppings();">Submit toppings</button>
	</div>
</div>