我在這里有一段代碼，它根據用戶在輸入中的選擇，在 x 和 y 位置（高度和長度）創建一些巧克力塊（但不是真的）網格，我希望它分配一個新的id（最好是 imgPos1、imgPos2 等...）到它單獨生產的每塊巧克力。我曾嘗試參考其他帖子，但我完全一無所知。我對第三方框架（反應等）的任何建議持開放態度。
HTML（和 js）：
<html>
<body>
<div>
<form name='grid' id="grid">
<!-- Form to define the x size and y size of the grid made out of chocolate pieces -->
Desired Length: <input type='number' name='length' min=1 max=10 step=1 value=1 id="lengthInput" />
Desired Height: <input type='number' name='height' min=1 max=10 step=1 value=1 id="heightInput" />
<input type='button' value='Apply' class="button_Change" />
</form>
</div>
<div id='choc'></div>
<template>
<img id="imgPos" src="https://cdn.shopify.com/s/files/1/1061/1924/products/Chocolate_Bar_Emoji_large.png?" onclick='removeMe(this)' class='visible'>
</template>
<script type="text/javascript">
/* Script that creates the grid by cloning the chocolate image for x:length
and y:height */
// defines variables q,d,form using jquery
const d = document;
const q = (e, n = d) => n.querySelector(e);
const form = d.forms.grid;
// Listens for activity on the button depending on its state
document.querySelector('[type="button"]').addEventListener("click", (e) => {
let choc = q("#choc");
choc.innerHTML = "";
// Maxes out the values for height and length to 10 for practical reasons
if (form.height.value > 10) form.height.value = 10;
if (form.length.value > 10) form.length.value = 10;
// assigns chocolate image to length and height
for (let y = 0; y < form.height.value; y ) {
let div = d.createElement("div");
choc.appendChild(div);
for (let x = 0; x < form.length.value; x ) {
div.appendChild(q("#imgPos", q("template").content).cloneNode(true));
}
}
});
function removeMe(e) {
e.classList.remove("visible");
};
</script>
</body>
</html>
CSS
#grid {
top: 180px;
left: 350px;
position: absolute;
cursor: auto;
font-family: 'Press Start 2P', cursive;
font-size: 10px;
}
#imgPos {
display: block;
width : auto;
height: auto;
cursor: pointer;
position: relative;
width: 20px;
height: auto;
top: 0px;
left: 0px;
}
#choc {
display: grid;
grid-template-rows: 1fr 1fr;
margin-left: auto;
margin-right: auto;
top: 240px;
left: 340px;
position: absolute;
cursor: default;
}
#choc > div{
position: absolute;
width:50px;
display:block;
}
#choc > div > #imgPos{
float: left;
float: right;
clear:none;
width:50px;
display: inline-block;
}
#choc > div > #imgPos:not(.visible) {
opacity: 0;
cursor: default;
}
這是我使用它制作的小提琴：
https://jsfiddle.net/p4ekmtgh/
uj5u.com熱心網友回復：
您可以將 id 與變數 x 和 y 連接起來
let child = q("#imgPos", q("template").content).cloneNode(true);
child.setAttribute("id","imgPos" x "_" y);
div.appendChild(child);
css也應該改變
這是作業小提琴：https : //jsfiddle.net/0fhykzmw/
uj5u.com熱心網友回復：
您可以在 x for loop 中添加此行。 document.getElementById('imgPos').id = 'imgPos_' x這將在每次迭代時將 id 與 X 的值連接起來。
for (let x = 0; x < form.length.value; x ) {
div.appendChild(q("#imgPos", q("template").content).cloneNode(true));
document.getElementById('imgPos').id = 'imgPos_' x;
}
我還建議將巧克力元素的 css 設為一個類，因此可以將類及其類屬性添加到元素中：
.imgPos {
display: block;
width : auto;
height: auto;
cursor: pointer;
position: relative;
top: 0px;
left: 0px;
}
...為每個巧克力元素設定樣式，然后將 ID 更改為唯一的數字 ID。
轉載請註明出處，本文鏈接：https://www.uj5u.com/yidong/364139.html
標籤：javascript html 查询 css