我正在嘗試制作游戲，并且我一直在嘗試讓角色按鈕消失并在點擊時重新出現。我認為 if else 陳述句是最好的方法，但我可能錯了，因為我是 javascript 新手。我設法讓它消失，但不能讓它在點擊 html 時再次出現：
<body>
<div id="game">
<div id="block"></div>
<button id="character" onclick="myFunction()"></button>
</div>
<script>
function myFunction() {
if (document.getElementById("character").style.display="block" == true) {
document.getElementById("character").style.display="none";
} else {
document.getElementById("character").style.display="block";
}
}
</script>
</body>
</html>
css：
*{
padding: 0;
margin: 0;
}
#game {
margin: auto;
width: 400px;
height: 500px;
border: 1px solid black;
overflow: hidden;
}
#block {
width: 50px;
height: 500px;
background-color: black;
position: relative;
left: 400px;
animation: block 2s infinite linear;
}
@keyframes block {
0%{left: 400px;}
100%{left: -50px;}
}
#character {
height: 50px;
width: 50px;
background-color: black;
margin: auto;
top: 250px;
margin-left: 15px;
position: absolute;
display: block;
}
uj5u.com熱心網友回復：
通過將 adisplay:none應用于按鈕（如您的代碼和其他答案所做的那樣）意味著一旦按鈕被隱藏，隨后將無法單擊以取消隱藏元素。您是否打算使用類似于以下內容的內容來設定visibility屬性而不是顯示，以便每次都不會重置影片？
document.querySelector('button#character').addEventListener('click', function(e) {
this.parentNode.querySelector('#block').classList.toggle('hidden');
});*{
padding: 0;
margin: 0;
}
#game {
margin: auto;
width: 400px;
height: 500px;
border: 1px solid black;
overflow: hidden;
}
#block {
width: 50px;
height: 500px;
background-color: black;
position: relative;
left: 400px;
animation: block 2s infinite linear;
}
@keyframes block {
0%{left: 400px;}
100%{left: -50px;}
}
#character {
height: 50px;
width: 50px;
background-color: black;
margin: auto;
top: 250px;
margin-left: 15px;
position: absolute;
display: block;
}
.hidden{visibility:hidden}
div:before{content:attr(id)}<div id="game">
<div id="block"></div>
<button id="character"></button>
</div>或者隱藏按鈕本身，該opacity屬性可能更合適，因為按鈕仍然占據空間但只是不可見，因此可以再次單擊以顯示自身？
document.querySelector('button#character').addEventListener('click', function(e) {
this.classList.toggle('hidden');
});* {
padding: 0;
margin: 0;
}
#game {
margin: auto;
width: 400px;
height: 500px;
border: 1px solid black;
overflow: hidden;
}
#block {
width: 50px;
height: 500px;
background-color: black;
position: relative;
left: 400px;
animation: block 2s infinite linear;
}
@keyframes block {
0% {
left: 400px;
}
100% {
left: -50px;
}
}
#character {
height: 50px;
width: 50px;
background-color: black;
margin: auto;
top: 250px;
margin-left: 15px;
position: absolute;
display: block;
transition:ease-in-out all 250ms;
}
.hidden {
opacity:0
}
div:before {
content: attr(id)
}<div id="game">
<div id="block"></div>
<button id="character"></button>
</div>uj5u.com熱心網友回復：
試試這個：
<body>
<div id="game">
<div id="block"></div>
<button id="character" onclick="myFunction()"></button>
</div>
<script>
function myFunction() {
if (document.getElementById("character").style.display==="block") {
document.getElementById("character").style.display="none";
} else {
document.getElementById("character").style.display="block";
}
}
</script>
</body>
</html>
uj5u.com熱心網友回復：
let x = 0;
document.getElementsByTagName('body')[0].addEventListener('click',function(){
let char = document.getElementById('character')
if(x%2 == 0){
x ;
char.classList.remove('show')
char.classList.add('hide')
}else{
x
char.classList.remove('hide')
char.classList.add('show')
}
})
.hide{
display:none;
}
.show{
display:block;
}
*{
padding: 0;
margin: 0;
}
#game {
margin: auto;
width: 400px;
height: 500px;
border: 1px solid black;
overflow: hidden;
}
#block {
width: 50px;
height: 500px;
background-color: black;
position: relative;
left: 400px;
animation: block 2s infinite linear;
}
@keyframes block {
0%{left: 400px;}
100%{left: -50px;}
}
#character {
height: 50px;
width: 50px;
background-color: black;
margin: auto;
top: 250px;
margin-left: 15px;
position: absolute;
} <body>
<div id="game">
<div id="block"></div>
<button id="character" class='show'></button>
</div>
</body>uj5u.com熱心網友回復：
既然你已經讓它消失了，你要點擊什么來顯示隱藏的框？
我在下面創建了這個片段來解釋你可以遵循的邏輯，以便在可見和隱藏的黑框之間切換，你肯定需要點擊一些東西來啟動所需元素的可見性，所以我為此創建了一個按鈕。
函式showElements(arr)接受array您想要將它們帶回頁面的 ID。
.black-box {
height: 50px;
width: 50px;
background-color: black;
position: relative;
display: block;
margin:5px;
float: left;
}<html>
<body>
<div id="game">
<div id="block"></div>
<button onclick="showElements(['character','character2'])">SHOW ELEMENTS</button>
<button class="black-box" id="character" onclick="hideThisElement(this)" style="display:block"></button>
<button class="black-box" id="character2" onclick="hideThisElement(this)" style="display:block"></button>
</div>
<script defer>
function hideThisElement(e){
e.style.display = "none";
}
function showElements(arr){
arr.forEach(el => {
let elId = document.getElementById(el)
if(document.body.contains(elId)){
if(elId.style.display == "none"){
elId.style.display = "block"
}
}
})
}
</script>
</body>
</html>轉載請註明出處，本文鏈接：https://www.uj5u.com/caozuo/401315.html
標籤：javascript html css
上一篇：如何模擬/創建用于測驗的FirebaseUsercredentials物件
下一篇：什么是CSS注入以及如何防止它？