Muj*_*bly 1 html javascript css
由于某些原因，选项末尾有一个逗号。它不在模板中，我不确定它来自哪里。
起初我以为这是某个脚本，但即使在隔离后问题似乎仍然存在。
const options = [
"Easy to use",
"Loading",
"Fast",
"Others (Mention below)"
];
const template = `
<div class="question-title">sdjhaskjdhakjs</div>
<div class="question-options">${options?.map((option, i) => {
return `
<div class="question-option">
<input class="${"id"}-feedback-question-option" type="radio" id="${"id"}-${option}" name="option" value="${option}" ${
options.length === i - 1 ? "checked" : ""
} />
<label for="${"id"}-${option}">${option}</label>
</div>`;
})}</div>
`;
document.getElementById("app").innerHTML = template;.question-title {
position: relative;
height: 40px;
display: flex;
align-items: center;
justify-content: center;
font-weight: normal;
font-size: 16px;
}
.question-options {
position: relative;
display: flex;
align-items: center;
justify-content: center;
font-weight: normal;
font-size: 12px;
gap: 10px;
flex-warp: warp;
}
.question-option {
display: flex;
align-items: center;
justify-content: center;
gap: 5px;
}
.question-option>label {
margin-bottom: unset;
}
input[type=radio]::after {
content: '';
}<!DOCTYPE html>
<html>
<head>
<title>Parcel Sandbox</title>
<meta charset="UTF-8" />
</head>
<body>
<div id="app"></div>
</body>
</html>转换为字符串的数组会自动连接,
用于.join('')绕过此行为
const options = [
"Easy to use",
"Loading",
"Fast",
"Others (Mention below)"
];
const template = `
<div class="question-title">sdjhaskjdhakjs</div>
<div class="question-options">${options?.map((option, i) => {
return `
<div class="question-option">
<input class="${"id"}-feedback-question-option" type="radio" id="${"id"}-${option}" name="option" value="${option}" ${
options.length === i - 1 ? "checked" : ""
} />
<label for="${"id"}-${option}">${option}</label>
</div>`;
}).join('')}</div>
`;
document.getElementById("app").innerHTML = template;.question-title {
position: relative;
height: 40px;
display: flex;
align-items: center;
justify-content: center;
font-weight: normal;
font-size: 16px;
}
.question-options {
position: relative;
display: flex;
align-items: center;
justify-content: center;
font-weight: normal;
font-size: 12px;
gap: 10px;
flex-warp: warp;
}
.question-option {
display: flex;
align-items: center;
justify-content: center;
gap: 5px;
}
.question-option>label {
margin-bottom: unset;
}
input[type=radio]::after {
content: '';
}<!DOCTYPE html>
<html>
<head>
<title>Parcel Sandbox</title>
<meta charset="UTF-8" />
</head>
<body>
<div id="app"></div>
</body>
</html>