我不久前开始使用javascript，并制作了一个简单的井字游戏。但是当我单击一个框两次时，o 和 x 显示。我只想展示一个。如果我的代码不干净，请随时告诉我如何清理它。如果你需要的话我可以给你html代码。感谢您抽出时间来帮助我。
let case1 = document.getElementById('case1');
let case2 = document.getElementById('case2');
let case3 = document.getElementById('case3');
let case4 = document.getElementById('case4');
let case5 = document.getElementById('case5');
let case6 = document.getElementById('case6');
let case7 = document.getElementById('case7');
let case8 = document.getElementById('case8');
let case9 = document.getElementById('case9');
let i = 0;
let oui = 0;
case1.onclick = function(){
if (i== 0){
document.getElementById('un').style.display = "block";
i++;
}
else if (i==1){
document.getElementById('deux').style.display = "block";
i--;
}
case1.onclick.removeAttribute();
};
case2.onclick = function(){
if (i==0){
document.getElementById('trois').style.display = "block";
i++;
}
else if (i==1){
document.getElementById('quatre').style.display = "block";
i--;
}
};
case3.onclick = function(){
if (i==0){
document.getElementById('cinq').style.display = "block";
i++;
}
else if (i==1){
document.getElementById('six').style.display = "block";
i--;
}
};
case4.onclick = function(){
if (i==0){
document.getElementById('sept').style.display = "block";
i++;
}
else if (i==1){
document.getElementById('huit').style.display = "block";
i--;
}
};
case5.onclick = function(){
if (i==0){
document.getElementById('neuf').style.display = "block";
i++;
}
else if (i==1){
document.getElementById('dix').style.display = "block";
i--;
}
};
case6.onclick = function(){
if (i==0){
document.getElementById('onze').style.display = "block";
i++;
}
else if (i==1){
document.getElementById('douze').style.display = "block";
i--;
}
};
case7.onclick = function(){
if (i==0){
document.getElementById('treize').style.display = "block";
i++;
}
else if (i==1){
document.getElementById('quatorze').style.display = "block";
i--;
}
};
case8.onclick = function(){
if (i==0){
document.getElementById('quinze').style.display = "block";
i++;
}
else if (i==1){
document.getElementById('seize').style.display = "block";
i--;
}
};
case9.onclick = function(){
if (i==0){
document.getElementById('dixsept').style.display = "block";
i++;
}
else if (i==1){
document.getElementById('dixhuit').style.display = "block";
i--;
}
};
这是 html
<body>
<div id="contener" style="display: flex; position: relative;">
<div class ="case" id="case1"><i id="un" class="far fa-circle fa-10x"></i><i id="deux"class="fas fa-times fa-10x"></i></div>
<div class ="case"id="case2"><i id="trois"class="far fa-circle fa-10x"></i><i id="quatre"class="fas fa-times fa-10x"></i></div>
<div class ="case" id="case3"><i id="cinq"class="far fa-circle fa-10x"></i><i id="six"class="fas fa-times fa-10x"></i></div>
<div class ="case" id="case4"><i id="sept"class="far fa-circle fa-10x"></i><i id="huit"class="fas fa-times fa-10x"></i></div>
<div class ="case" id="case5"><i id="neuf"class="far fa-circle fa-10x"></i><i id="dix"class="fas fa-times fa-10x"></i></div>
<div class ="case" id="case6"><i id="onze"class="far fa-circle fa-10x"></i><i id="douze"class="fas fa-times fa-10x"></i></div>
<div class ="case" id="case7"><i id="treize"class="far fa-circle fa-10x"></i><i id="quatorze"class="fas fa-times fa-10x"></i></div>
<div class ="case" id="case8"><i id="quinze"class="far fa-circle fa-10x"></i><i id="seize"class="fas fa-times fa-10x"></i></div>
<div class ="case" id="case9"><i id="dixsept"class="far fa-circle fa-10x"></i><i id="dixhuit"class="fas fa-times fa-10x"></i></div>
</div>
</body>
最佳答案
我没有适合您的解决方案，但有一些代码提示。如果您也发布 html，我可以给您一个解决方案:)。尽管如此，这里还是我对更好的代码的建议:
- 可能使用计数器和模数而不是加法和减法，例如:
if (++i % 2){
document.getElementById('trois').style.display = "block";
} else {
document.getElementById('quatre').style.display = "block";
}
box1-cross 或 box1-circle。编辑:
所以在我看到 html 后，你应该只在圆形和十字元素上使用类名。您可以使用查询选择器查找元素:case1.querySelector('.cross')。
最终的解决方案可能如下所示:
JS:
let counter = 0;
document.querySelectorAll('.case').forEach(c => c.addEventListener('click', () => {
if (c.classList.contains("set")) return;
c.classList.add("set");
if (++counter % 2) {
c.querySelector('.circle').style.display = "block";
} else {
c.querySelector('.cross').style.display = "block";
}
}));
HTML:
<div id="contener" style="display: flex; position: relative;">
<div class="case" id="case1"><i class="far fa-circle fa-10x circle"></i><i class="fas fa-times fa-10x cross"></i></div>
<div class="case" id="case2"><i class="far fa-circle fa-10x circle"></i><i class="fas fa-times fa-10x cross"></i></div>
<div class="case" id="case3"><i class="far fa-circle fa-10x circle"></i><i class="fas fa-times fa-10x cross"></i></div>
<div class="case" id="case4"><i class="far fa-circle fa-10x circle"></i><i class="fas fa-times fa-10x cross"></i></div>
<div class="case" id="case5"><i class="far fa-circle fa-10x circle"></i><i class="fas fa-times fa-10x cross"></i></div>
<div class="case" id="case6"><i class="far fa-circle fa-10x circle"></i><i class="fas fa-times fa-10x cross"></i></div>
<div class="case" id="case7"><i class="far fa-circle fa-10x circle"></i><i class="fas fa-times fa-10x cross"></i></div>
<div class="case" id="case8"><i class="far fa-circle fa-10x circle"></i><i class="fas fa-times fa-10x cross"></i></div>
<div class="case" id="case9"><i class="far fa-circle fa-10x circle"></i><i class="fas fa-times fa-10x cross"></i></div>
</div>
关于javascript - 如何制作只能单击一次的元素？，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/59023535/