Javascript 将锚定标记作为其自身而不是通过id传递到函数中

我已经为我的网站建立了一个小的交互式问答部分，但我知道它的结构可以更好。每个问题都有三个可能的答案。按照我现在设置的方式，我需要为每个可能的答案提供一个唯一的标识符。这会很快地将多个问题加起来x3个唯一ID。我是否可以通过我的函数而不是ID传递特定的信息

<a class="toggle" href="#exampleQ" id="dropQ01" onclick="setCorrect('dropQ01', '#f9a81d')">
    <b>Answer Ones</b>
</a>
<a class="toggle" href="#exampleQ" id="dropQ02" onclick="setWrong('dropQ02', '#f9a81d')">
    <b>Answer 2</b>
</a>

<a class="toggle" href="#exampleQ" id="dropQ03" onclick="setWrong('dropQ03', '#f9a81d')">
    <b>Answer 3</b>
</a>

正确答案功能

var countC = 1;
function setCorrect(btn, color) {
    var property = document.getElementById(btn);
    if (countC == 0) {
        property.style.backgroundColor = "#f9a81d"
        countC = 1;
    } else {
        property.style.backgroundColor = "#00933B"
        countC = 1;
    }
}

---

如果有人看到我可以改进代码以提高效率的方法，我会非常感激。谢谢。

删除id，然后单击以下事件设置您的

：

<a class="toggle" href="#exampleQ" onclick="setCorrect(this, '#f9a81d')">

正确答案功能

var countC = 1;
function setCorrect(btn, color) {
    if (countC == 0) {
      btn.style.backgroundColor = "#f9a81d"
      countC = 1;
    } else {
        btn.style.backgroundColor = "#00933B"
        countC = 1;
    }
}

是的，我们可以在HTML标记中传递
this
，但是对于可伸缩的、冗余较少的代码，我们可以在加载DOM后将事件侦听器添加到锚定标记中-这样，您将使
this
指向锚定标记，并且您现在有了一个
事件
，您可以使用它来创建
事件.preventDefault（）
停止在url中追加该哈希值-


var allAnchors=document.queryselectoral（'dropQ03，'dropQ02，'dropQ01'）；
var countX=0，
countC=0；
var eventListener=函数（事件）{
var Id=this.Id；
如果（Id==“dropQ03”| | Id==“dropQ02”）{
如果（countX==0）{
this.style.backgroundColor=“#f9a81d”
countX=1；
}否则{
this.style.backgroundColor=“#ff0033”
countX=1；
}
}否则{
如果（countC==0）{
this.style.backgroundColor=“#f9a81d”
countC=1；
}否则{
this.style.backgroundColor=“#00933B”
countC=1；
}
}
}
对于（变量i=0；i

我同意Dan Mullin的建议，在回答您关于如何避免显式传递每个ID的具体问题时使用
此

就整体结构而言，setCorrect和seterror之间仍然存在大量重复，而且每个answer元素实现这些都会带来不幸的副作用，即在标记中公开正确的答案。下面是一个快速的小实现，它使用一个应答键对象，该对象具有映射到应答元素ID的键/值对


const answerKey={Q01:a'，Q02:d'，Q03:b'}
让correctCount=0；
设不正确计数=0；
功能检查应答（事件）{
常量[问题，答案]=事件.target.id.split（“”）；
const correct=回答键[问题]==回答；
如果（正确）{
event.target.style.backgroundColor=“绿色”；
校正计数+=1；
document.getElementById（'correct-count'）。innerHTML=correctCount；
}否则{
event.target.style.backgroundColor=“红色”；
不正确计数+=1；
document.getElementById（'error-count'）。innerHTML=incorrectCount；
}
}
const answers=document.querySelectorAll（'.toggle'）；
answers.forEach（toggle=>toggle.addEventListener（“单击“，（e）=>checkAnswer（e），false））
正确：0

错误：0

问题1
问题2
Edit：修改代码以显示如何在函数中使用此
var countX = 1;
function setWrong(btn, color) {
    if (countX == 0) {
      btn.style.backgroundColor = "#f9a81d"
      countX = 1;
    } else {
      btn.style.backgroundColor = "#ff0033"
      countX = 1;
    }
}

var countC = 1;
function setCorrect(btn, color) {
    if (countC == 0) {
      btn.style.backgroundColor = "#f9a81d"
      countC = 1;
    } else {
        btn.style.backgroundColor = "#00933B"
        countC = 1;
    }
}