如何使用OOP JavaScript重复函数

我正在尝试创建一个基本的闪卡游戏，在这里你填写一个问题和一个答案，在你点击保存按钮后，闪卡被创建，通过点击显示隐藏锚链接，答案应该消失，我的问题是，只有第一张卡允许该方法工作。任何人都可以解释一下如何解决这个问题，这样我就可以用面向对象的方式重复这个问题，我知道这段代码可能需要重写，任何关于这段代码的建议/示例都会很有帮助。 谢谢

const card=document.querySelector（'.card'）；
const addCardBtn=document.querySelector（'.add'）；
const closeCardBtn=document.querySelector（'.close'）；
const saveCardBtn=document.querySelector（'.save'）；
const questionInput=document.querySelector（“#问题输入”）；
const answerInput=document.querySelector（“#应答输入”）；
//添加卡
设addCard=addCardBtn.addEventListener（'click'，函数（e）{
card.style.display='block'
})
//关闭卡
设closeCard=closeCardBtn.addEventListener（'click'，函数（e）{
card.style.display='none'
})
//创建闪存卡
让saveFlashCard=saveCardBtn.addEventListener（'click'，函数（e）{
e、 预防默认值（）
如果（questionInput.value==''| answerInput.value==''）{
警报（'空字段，请填写两部分'）
}否则{
const flashCard=document.createElement（'flash'））
flashCard.innerHTML=`
${questionInput.value}
显示/隐藏答案
${answerInput.value}

编辑
删除
`
document.querySelector（“.cards”）.appendChild（flashCard）；
questionInput.value=“”
answerInput.value=“”
document.querySelector（'.show'）.addEventListener（'click'，函数（e）{
document.querySelector（'.flash answer'）.classList.toggle（'hide'））
})
}       
})
函数播放（）{
this.addCard=addCard
this.closeCard=closeCard
this.saveFlashCard=saveFlashCard
}
康斯特游戏=新游戏（）
*{
框大小：边框框；
保证金：0；
填充：0；
}
* {
框大小：边框框；
}
身体{
字体系列：“开放式SAN”；
}
.头{
边缘顶部：20px；
左边距：100px；
}
.卡片{
显示：无；
左边距：100px；
宽度：760px；
边框样式：实心；
边框颜色：珊瑚；
}
文本区域，h3{
边缘顶部：10px；
左边距：20px；
}
.btn{
填充：10px 10px；
页边顶部：.5rem！重要；
边缘底部：.5rem！重要；
文本转换：大写！重要；
背景：透明；
边界半径：5px；
边框颜色：rgb（154,45,0）；
颜色：rgb（255、134、83）；
背景图像：初始；
背景色：透明；
光标：指针；
}
.结束{
保证金：0px 0px 0px 700px；
}
.保存{
利润率：0px 20px；
}
.添加{
利润率：0px 20px；
}
.闪光{
文本对齐：居中；
填充：10px 10px；
宽度：适合的内容；
边框样式：实心；
边框颜色：珊瑚；
利润率：30px 100px；
}
.隐藏{
显示：无；
}
/*.闪光{
利润率：3px0px；
} */
button.btn.edit{
左边距：5px；
颜色：rgb（6221231）；
}
button.btn.delete{
左边距：5px；
颜色：rgb（231192 62）；
}
/****媒体查询*****/
/*移动设备的媒体查询*/
@介质（最大宽度：480px）{
.卡片{
框大小：边框框；
宽度：480px；
左边距：20px；
}
.头{
左边距：20px；
}
文本区{
宽度：420px；
}
.闪光{
左边距：20px；
}
.结束{
利润率：0px 20px；
}
}
/*低分辨率平板电脑、iPad的媒体查询*/
@介质（最小宽度：481px）和（最大宽度：767px）{
}
/*平板电脑iPad纵向模式的媒体查询*/
@介质（最小宽度：768px）和（最大宽度：1024px）{
}
/*笔记本电脑和台式电脑的媒体查询*/
@介质（最小宽度：1025px）和（最大宽度：1280px）{
} 
/*大屏幕媒体查询*/
@介质（最小宽度：1281px）{
}


文件
闪卡
添加问题
问题:
答复
拯救
将
附加到DOM后，需要绑定单击事件

这可以在此行之后完成：

document.querySelector('.cards').appendChild(flashCard);  

可能需要在绑定事件之前解除绑定，以避免多个绑定（除非通过
id
属性绑定单个项目）。另外，最好使用
let
代替
const
（以便以后分配其他内容）。
我的解决方案如下：

// top level add a counter to keep track of id's
let id_counter = 0;

//update where you add the flashcard
//... your code before
const flashCard = document.createElement("flash");
flashCard.innerHTML = `<div id="flash-${_id_counter}" class="flash">
        <p class="flash-question">${questionInput.value}</p>
        <a id="show${_id_counter}" data-id="${_id_counter}" class="show">Show / Hide Answer</a>
        <div id="answer${_id_counter}" class="flash-answer">
        <p>${answerInput.value}</p>
        </div>
        <button class="btn edit">Edit</button>
        <button class="btn delete">Delete</button>
        </div>`;
document.querySelector(".cards").appendChild(flashCard);
questionInput.value = "";
answerInput.value = "";
let show = document.querySelector(`#show${_id_counter}`);
show.addEventListener("click", function (e) {
    document.querySelector(`#answer${e.target.dataset.id}`).classList.toggle("hide");
});
_id_counter++;
//... your code after

//顶层添加一个计数器以跟踪id
设id_计数器=0；
//更新您添加抽认卡的位置
//... 您以前的代码
const flashCard=document.createElement（“flash”）；
flashCard.innerHTML=`
${questionInput.value}
显示/隐藏答案
${answerInput.value}

编辑
删除
`;
文档查询选择器（“卡片”）.appendChild（flashCard）；
questionInput.value=“”；
answerInput.value=“”；
let show=document.querySelector（`show${u id\u counter}`）；
show.addEventListener（“单击”，函数（e）{
document.querySelector（`answer${e.target.dataset.id}`）、classList.toggle（“hide”）；
});
_id_计数器++；
//... 你的代码

在此块之后，它应该单独工作。
我没有对代码做太多更改，但您可以做很多事情：）
您没有在闪存卡上绑定任何这些按钮，对我来说这不是真正的OOP。。。例如，一个JS应用程序对象将处理所有这些。在任何情况下，OOP都意味着在编写时不需要重复任何内容