我正在尝试创建一个基本的闪卡游戏，在这个游戏中，你填写一个问题和一个答案，点击保存按钮后，闪卡就会创建出来，点击显示隐藏锚链接，答案就会消失，我的问题是只有第一张卡才允许这种方法工作。有人能解释一下如何解决这个问题吗？这样我就可以用OOP的方式重复一遍。我知道这个代码可能需要重写，任何关于这个代码的建议/例子都会很有帮助。谢谢
const card = document.querySelector('.card');
const addCardBtn = document.querySelector('.add');
const closeCardBtn = document.querySelector('.close');
const saveCardBtn = document.querySelector('.save');
const questionInput = document.querySelector('#question-input');
const answerInput = document.querySelector('#answer-input');
// add card
let addCard = addCardBtn.addEventListener('click', function(e) {
card.style.display = 'block'
})
// close card
let closeCard = closeCardBtn.addEventListener('click', function(e) {
card.style.display = 'none'
})
// create flash card
let saveFlashCard = saveCardBtn.addEventListener('click', function(e) {
e.preventDefault()
if (questionInput.value === '' || answerInput.value === '') {
alert('empty fields, please fill both parts')
} else {
const flashCard = document.createElement('flash')
flashCard.innerHTML = `<div class="flash">
<p class="flash-question">${questionInput.value}</p>
<a class="show">Show / Hide Answer</a>
<div 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 = ''
document.querySelector('.show').addEventListener('click', function(e) {
document.querySelector('.flash-answer').classList.toggle('hide')
})
}
})
function Play() {
this.addCard = addCard
this.closeCard = closeCard
this.saveFlashCard = saveFlashCard
}
const game = new Play();* {
box-sizing: border-box;
margin: 0;
padding: 0;
}
* {
box-sizing: border-box;
}
body {
font-family: 'Open Sans';
}
.head {
margin-top: 20px;
margin-left: 100px;
}
.card {
display: none;
margin-left: 100px;
width: 760px;
border-style: solid;
border-color: coral;
}
textarea ,h3{
margin-top: 10px;
margin-left: 20px;
}
.btn {
padding: 10px 10px;
margin-top: .5rem!important;
margin-bottom: .5rem!important;
text-transform: capitalize!important;
background: transparent;
border-radius: 5px;
border-color: rgb(154, 45, 0);
color: rgb(255, 134, 83);
background-image: initial;
background-color: transparent;
cursor: pointer;
}
.close {
margin: 0px 0px 0px 700px;
}
.save {
margin: 0px 20px;
}
.add {
margin: 0px 20px;
}
.flash {
text-align: center;
padding: 10px 10px;
width:fit-content ;
border-style: solid;
border-color: coral;
margin: 30px 100px;
}
.hide {
display: none;
}
/* .flash p {
margin: 3px 0px;
} */
button.btn.edit{
margin-left: 5px;
color: rgb(62, 212, 231);
}
button.btn.delete{
margin-left: 5px;
color: rgb(231, 192, 62);
}
/**** media queries *****/
/* Media Query for Mobile Devices */
@media (max-width: 480px) {
.card{
box-sizing: border-box;
width: 480px;
margin-left: 20px;
}
.head {
margin-left: 20px;
}
textarea {
width: 420px;
}
.flash {
margin-left: 20px;
}
.close {
margin: 0px 20px;
}
}
/* Media Query for low resolution Tablets, Ipads */
@media (min-width: 481px) and (max-width: 767px) {
}
/* Media Query for Tablets Ipads portrait mode */
@media (min-width: 768px) and (max-width: 1024px){
}
/* Media Query for Laptops and Desktops */
@media (min-width: 1025px) and (max-width: 1280px){
}
/* Media Query for Large screens */
@media (min-width: 1281px) {
}
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<!-- CSS -->
<link rel="stylesheet" href="./style.css">
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
</head>
<body>
<div class="head">
<h2>Flashcards</h2>
</div>
<button class="btn add">Add Question</button>
</div>
<div class="card">
<div class="main">
<button class="btn close"><i class="fa fa-window-close"></i></button>
<h3>Question</h3>
<textarea name="" id="question-input" cols="100" rows="10"></textarea>
<h3>Answer</h3>
<textarea name="" id="answer-input" cols="100" rows="10"></textarea>
<button class="btn save">Save</button>
</div>
</div>
<div class="cards">
</div>
<!-- JS -->
<script src="./app.js"></script>
</body>
</html>在将<flash/>附加到DOM之后，您需要绑定点击事件。
这可以在以下行之后完成：
document.querySelector('.cards').appendChild(flashCard);
为了避免多个绑定(除非通过其id属性绑定单个项(，可能需要在绑定事件之前对其进行解除绑定。此外，最好使用let而不是const(以便稍后分配其他内容(。
Aight我的解决方案如下js:
// 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
在这个块之后，它应该单独工作。我没有对代码做太多更改，但你可以做很多事情：(