如何在没有硬编码的情况下迭代唯一的 id 名称？答案

【问题标题】：How to iterate over unique id names without hardcoding?如何在没有硬编码的情况下迭代唯一的 id 名称？
【发布时间】：2022-11-02 23:14:39
【问题描述】：

我正在做一个测验。一旦按下按钮，我想迭代不同的按钮以提出不同的问题。但是，由于每个按钮都有不同的 id，我发现很难找到在循环中更改 id 名称的方法。请参阅下面的代码：

let mybtn1 = document.getElementById("myBtn1")
let questions = [
    {
        question : "What is an Epidemics?",
        choiceA : "CorrectA",
        choiceB : "WrongB",
        choiceC : "WrongC",
        choiceD: "Hello",
        correct : "Hello"
    },{
        question : "What does CSS stand for?",
        choiceA : "Wrong",
        choiceB : "Correct",
        choiceC : "Wrong",
        correct : "B"
    },{
        question : "What does JS stand for?",
        choiceA : "Wrong",
        choiceB : "Wrong",
        choiceC : "Correct",
        correct : "C"
    }
];

mybtn1.addEventListener("click", pressbtn);
function pressbtn(){
  modal.style.display = "block";
  questionText.innerHTML = questions[0].question; 
  answerA.innerHTML = questions[0].choiceA;
  answerB.innerHTML = questions[0].choiceB;
  answerC.innerHTML = questions[0].choiceC;
  answerD.innerHTML = questions[0].choiceD;

}

<ul class="path-one-row">
                    <li class="grid blue" id="myBtn1"></li>
                    <li class="grid blue" id="myBtn2"></li>
                    <li class="grid blue" id="myBtn3"></li>
                    <li class="grid blue" id="myBtn4"></li>
                </ul>

例如，当我单击 id='mybtn1' 的按钮时，它应该迭代以使我可以访问问题 [0]，这样我就可以操作 innerHTML。对于 id='mybtn2', questions[1] 等等。我怎么能写一个循环来帮助我迭代呢？

【问题讨论】：

您应该始终共享一个最小的可重现示例。截至目前，我们无法在我们的机器上快速复制您的问题状态并检查是否存在任何问题，也无法进行任何调整。

标签： javascript html loops logic

【解决方案1】：

您可以只为按钮提供相同的class 或data-attribute，您可以使用querySelectorsAll 选择它们并循环，并使用它的索引，您可以迭代。

例如，所有按钮都具有data-question 属性。

让他们喜欢

const questions = document.querySelectorsAll('[data-question]')

并循环通过

questions.forEach((index) => {
question.addEventListener("click", () => pressbtn(index));
function pressbtn(index){
  modal.style.display = "block";
  questionText.innerHTML = questions[index].question; 
  answerA.innerHTML = questions[index].choiceA;
  answerB.innerHTML = questions[index].choiceB;
  answerC.innerHTML = questions[index].choiceC;
  answerD.innerHTML = questions[index].choiceD;

}
})

【讨论】：

我试图在 HTML 中对所有按钮使用 data-question="q" ，但它没有用。我的其余代码与您的相同。有任何想法吗？
@SFleevo，您能否提供代码的完整示例？

【解决方案2】：

好吧，有几种方法可以做到这一点。使用 vanilla javascript，您可以在单击按钮时调用函数，将 id 传递给函数并使用该数据创建 li

<button id="0" click = changeButtons(id)>
<ul id="buttonList>
</ul>


//change buttons
changeButtons (id){
 let list =document.getElementbyId(buttonList)
 let questions = []
 questions[id].forEach(question => {
   list.innerHtml += <li><button> question</button> </li>
  })
}

请注意，您必须更改您的 json 以创建包含问题的数组，您还可以使用键来创建包含问题键的数组并访问该数组

【讨论】：