我有幾個盒子，每個盒子都包含按鈕和一個<p>元素，它的 innerText 是由 API 中的資料創建的。我onclick在每個盒子上放了一個（<div>包裝<p>元素和按鈕的盒子）。我希望每次單擊按鈕時，在同一個 div 中“坐在”此按鈕旁邊innerText的標簽將控制臺記錄。<p>目前無法弄清楚，這是我到目前為止所得到的：
const containerShapes = document.getElementById("container-pock-shape")
fetch("https://pokeapi.co/api/v2/pokemon-shape")
.then(res => res.json())
.then(data => data.results.map(item => {
return containerShapes.innerHTML =
`<div onclick="showName(event)">
<p>${item.name}</p>
<button>Select</button>
</div>`
}))
function showName(e) {
console.log()
}#container-pock-shape {
display: flex;
flex-wrap: wrap;
}
.shape-box {
border: 2px solid red;
display: flex;
flex-direction: column;
align-items: center;
padding: 10px;
width: 200px;
}
.shape-box p {
background-color: grey;
width: 100px;
text-align: center;
font-weight: 900;
}<body>
<div id="container-pock-shape">
</div>
</body>uj5u.com熱心網友回復：
您可以使用最近的。當您需要 forEach 或正確使用 map 時，也不要使用 map
我也強烈建議委托（點擊 div）
const containerShapes = document.getElementById("container-pock-shape")
fetch("https://pokeapi.co/api/v2/pokemon-shape")
.then(res => res.json())
.then(data => containerShapes.innerHTML = data.results
.map(({name}) => `<div >
<p>${name}</p>
<button>Select</button>
</div>`));
containerShapes.addEventListener("click", e => {
const tgt = e.target.closest("button")
if (tgt) console.log(tgt.closest("div.shape-box").querySelector("p").innerText)
})#container-pock-shape {
display: flex;
flex-wrap: wrap;
}
.shape-box {
border: 2px solid red;
display: flex;
flex-direction: column;
align-items: center;
padding: 10px;
width: 200px;
}
.shape-box p {
background-color: grey;
width: 100px;
text-align: center;
font-weight: 900;
}<body>
<div id="container-pock-shape"></div>
</body>uj5u.com熱心網友回復：
要獲取名稱，由于事件在整個 div 上，您需要使用querySelector并找到內部<p>元素并獲取其文本。
const containerShapes = document.getElementById("container-pock-shape")
fetch("https://pokeapi.co/api/v2/pokemon-shape")
.then(res => res.json())
.then(data => data.results.map(item =>
containerShapes.innerHTML =
`<div onclick="showName(this)">
<p>${item.name}</p>
<button>Select</button>
</div>`
))
function showName(box) {
const name = box.querySelector('p').textContent;
console.log(name);
}#container-pock-shape {
display: flex;
flex-wrap: wrap;
}
.shape-box {
border: 2px solid red;
display: flex;
flex-direction: column;
align-items: center;
padding: 10px;
width: 200px;
}
.shape-box p {
background-color: grey;
width: 100px;
text-align: center;
font-weight: 900;
}<body>
<div id="container-pock-shape"></div>
</body>另一種方法是僅將單擊事件添加到按鈕，closest然后查找形狀框，然后找到<p>.
const containerShapes = document.getElementById("container-pock-shape")
fetch("https://pokeapi.co/api/v2/pokemon-shape")
.then(res => res.json())
.then(data => data.results.map(item =>
containerShapes.innerHTML =
`<div >
<p>${item.name}</p>
<button onclick="showName(this)">Select</button>
</div>`
))
function showName(button) {
const name = button.closest('.shape-box').querySelector('p').textContent;
console.log(name);
}#container-pock-shape {
display: flex;
flex-wrap: wrap;
}
.shape-box {
border: 2px solid red;
display: flex;
flex-direction: column;
align-items: center;
padding: 10px;
width: 200px;
}
.shape-box p {
background-color: grey;
width: 100px;
text-align: center;
font-weight: 900;
}<body>
<div id="container-pock-shape"></div>
</body>轉載請註明出處，本文鏈接：https://www.uj5u.com/gongcheng/493389.html
標籤：javascript
上一篇：帶有模板的嵌套類