我使用了一個創建的 api，它將回傳一個包含電子郵件的串列，我創建了一個帶有 div 的模式，根據回傳的電子郵件數量，我想添加一個 div，同時輸入電子郵件的值在他們每個人中，我得到的最多就是在所有郵件中都放入相同的電子郵件，但至少我設法根據回傳的電子郵件數量添加了div的數量，遵循代碼
<div class="modal">
<h2>Lista</h2>
<div id="list">
</div>
</div>
modalList: (json) => {
qS('.screen').style.justifyContent = 'center';
qS('.screen').style.alignItems = 'center';
qS('.rightside').style.display = 'none';
qS('.modal').style.display = 'block';
json.list.forEach((item, index)=>{
let numeroHTML = ''
for(let i = 0; i <= index; i ){
numeroHTML = `<div class="result"></div>`;
}
qS('.modal #list').innerHTML = numeroHTML
qSa('.result').forEach((result) => {
result.innerHTML = item
})
});
}
我無法做到的邏輯是如何將每個專案放入陣列中，即僅將每封電子郵件放入 div 中，從而在此模式中列出
uj5u.com熱心網友回復：
詳細資訊在下面的示例中注釋
/*
I'll assume the JSON is a typical array of objects and each object having a
property/key "email"
*/
const data=[{email:"[email protected]"},{email:"[email protected]"},{email:"[email protected]"},{email:"[email protected]"},{email:"[email protected]"},{email:"[email protected]"},{email:"[email protected]"},{email:"[email protected]"},{email:"[email protected]"},{email:"[email protected]"}];
/**
* Renders a list in HTML from a given array of objects and a key.
* @param {string<CSS>} selector - A CSS selector of the <ul>, <ol>, or <menu>
* @param {array<object>} json - The data to make the list from
* @param {string} key - The property/key to get the value from for the list
*/
const modalList = (selector, json, key) => {
// Reference the list OR <body> (if undefined, null, etc)
const node = document.querySelector(selector) || document.body;
/*
On each iteration through >json< render a htmlString into a <li> and add
the current object's value of >key<
*/
json.forEach(item => node.insertAdjacentHTML('beforeEnd', `<li>${item[key]}</li>`));
};
/*
"click" event handler registered to button.open. When triggered the modal opens
and modalList() is called
*/
document.querySelector('.open').onclick = e => {
document.querySelector('.modal').showModal();
modalList('ul', data, 'email');
};
/* The rest is unrelated to question */
const UI = document.forms.UI;
UI.onclick = modalUI;
UI.onsubmit = funcX;
function modalUI(e) {
const OG = e.target;
if (OG.matches('.close')) {
document.querySelector('.modal').close();
}
};
function funcX(e) {
e.preventDefault();
console.log(e.type ' event fired');
};html {
font: 2ch/1.5 'Segoe UI'
}
html,
body {
width: 100%;
height: 100%;
padding: 0;
margin: 0;
}
main {
width: 100%;
height: 100%;
}
dialog {
margin: 10px auto;
min-height: 50%;
width: 50%;
}
header {
display: flex;
justify-content: space-between;
align-items: flex-end;
width: 90%;
padding-bottom: 5px;
border-bottom: 2px ridge grey
}
menu {
width: 90%;
display: flex;
justify-content: flex-end;
align-items: flex-start
}
h3 {
margin: 0 0 -8px 0;
}
.btn {
display: inline-block;
cursor: pointer;
border-radius: 5px;
}
section {
width: 90%
}
ul {
list-style: none;
margin-left: -35px
}
footer {
width: 90%;
border-top: 2px ridge grey;
}
.close {
align-self: flex-start;
}<main>
<dialog class='modal'>
<form id='UI'>
<header>
<h3>Email List</h3>
<input class='btn close' type='button' value='X'>
</header>
<section>
<ul></ul>
</section>
<footer>
<menu>
<button class='btn confirm'>Confirm</button>
<button class='btn close' type='button'>Cancel</button>
</menu>
</footer>
</form>
</dialog>
<menu>
<button class='btn open'>Open Email List</button>
</menu>
</main>uj5u.com熱心網友回復：
要從您的陣列創建 HTML，您可以使用 foreach 回圈，就像您正在做的那樣。您應該使用帶有 <li> 的 HTML <ul> 元素。為每次迭代做這樣的事情：
const element = document.createElement('li')
element.innerText = item
list.appendChild(element)
const json = {
list: ["one", "two", "three"]
}
const listElement = document.querySelector('#list')
json.list.forEach((item, index) => {
const element = document.createElement('li')
element.classList.add('result')
element.innerText = item
list.appendChild(element)
});<div class="modal">
<h2>Lista</h2>
<ul id="list">
</ul>
</div>轉載請註明出處，本文鏈接：https://www.uj5u.com/ruanti/452197.html
標籤：javascript html dom