这些单选按钮中的尾随逗号来自哪里？

问题描述 投票：0回答：1

由于某种原因，我的单选按钮中的每个选项后面都有一个逗号。我没有在模板中添加尾随逗号，而且我不确定它们来自哪里。

起初，我以为这是某个脚本，但即使在隔离后，问题似乎仍然存在。

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>

javascript html css
1个回答
6
投票

转换为字符串的数组会自动用 

,

连接

使用 

.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>

最新问题
© www.soinside.com 2019 - 2024. All rights reserved.