Web按鈕只能使用一次，然后我必須刷新頁面
[英]Web button only works once, then I have to refresh page
問題描述
我對網絡開發有點陌生。 作為我的第一個 JS 項目，我決定創建一個簡單的按鈕，如果有人點擊它，它會顯示一個自定義彈出窗口。 但問題是關閉彈出窗口后，我必須刷新頁面才能再次單擊按鈕。
到目前為止，這是我的代碼：
const btn = document.querySelector('.btn'); const cloBtn = document.querySelector('.close'); const popUp = document.querySelector('.popup'); const overlay = document.querySelector('.overlay'); btn.addEventListener('click', () => { popUp.classList.add('open'); overlay.classList.add('overlay-open'); }); cloBtn.addEventListener('click', () => { popUp.classList.add('popClose'); overlay.classList.add('overlay-close'); })
body { margin: 0%; } .btn { position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%); } button { border: none; cursor: pointer; } .btn button { background-color: blue; padding: 15px 45px 15px 45px; font-size: large; font-weight: 700; color: rgb(255, 255, 255); border-radius: 10px; } .popup { width: 300px; background-color: rgb(228, 228, 228); height: 150px; display: flex; justify-content: center; flex-direction: column; align-items: center; gap: 15px; border-radius: 10px; z-index: 5; position: absolute; top: 30%; left: 50%; transform: scale(1) translate(-50%, -50%); visibility: hidden; } .popup button { background-color: rgb(255, 0, 55); padding: 10px 30px 10px 30px; font-size: medium; font-weight: 700; color: rgb(0, 0, 0); border-radius: 10px; } .overlay { height: 100%; width: 100%; background-color: rgba(133, 131, 131, 0.555); position: absolute; z-index: 2; visibility: hidden; } .overlay-open { visibility: visible; } .overlay-close { visibility: hidden; } .open { visibility: visible; animation: boxPop 0.3s ease-in; } @keyframes boxPop { from { position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%) scale(0); } to { position: absolute; top: 30%; left: 50%; transform: scale(1) translate(-50%, -50%); } } .popClose { animation: boxClo 0.3s ease-in; transform: translate(-50%, -50%) scale(0); } @keyframes boxClo { from { position: absolute; top: 30%; left: 50%; transform: scale(1) translate(-50%, -50%); } to { position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%) scale(0); } }
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta http-equiv="X-UA-Compatible" content="IE=edge"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <link rel="stylesheet" href="style.css"> <title>Document</title> </head> <body> <div class="btn"><button>Press Me</button></div> <div class="popup"> <div class="sentence">Hello Nice to Meet You!</div> <div class="close"><button>Close</button></div> </div> <div class="overlay"></div> <script src="app.js"></script> </body> </html>
3 個解決方案
解決方案1
5 2022-06-21 10:29:23
問題是，兩個按鈕都按下添加類但沒有刪除計數器類。 最簡單的解決方案是使用toggle 。 在這種情況下，您可以將相同的 eventListener 綁定到兩個按鈕並大大縮短 JS 代碼：
const btn = document.querySelectorAll('.btn'); const popUp = document.querySelector('.popup'); const overlay = document.querySelector('.overlay'); btn.forEach(el => el.addEventListener('click', () => { popUp.classList.toggle('open'); overlay.classList.toggle('overlay-open'); }));
body { margin: 0%; } .btn { position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%); } button { border: none; cursor: pointer; } .btn button { background-color: blue; padding: 15px 45px 15px 45px; font-size: large; font-weight: 700; color: rgb(255, 255, 255); border-radius: 10px; } .popup { width: 300px; background-color: rgb(228, 228, 228); height: 150px; display: flex; justify-content: center; flex-direction: column; align-items: center; gap: 15px; border-radius: 10px; z-index: 5; position: absolute; top: 30%; left: 50%; transform: scale(1) translate(-50%, -50%); visibility: hidden; } .popup button { background-color: rgb(255, 0, 55); padding: 10px 30px 10px 30px; font-size: medium; font-weight: 700; color: rgb(0, 0, 0); border-radius: 10px; } .overlay { height: 100%; width: 100%; background-color: rgba(133, 131, 131, 0.555); position: absolute; z-index: 2; visibility: hidden; } .overlay-open { visibility: visible; } .overlay-close { visibility: hidden; } .open { visibility: visible; animation: boxPop 0.3s ease-in; } @keyframes boxPop { from { position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%) scale(0); } to { position: absolute; top: 30%; left: 50%; transform: scale(1) translate(-50%, -50%); } } .popClose { animation: boxClo 0.3s ease-in; transform: translate(-50%, -50%) scale(0); } @keyframes boxClo { from { position: absolute; top: 30%; left: 50%; transform: scale(1) translate(-50%, -50%); } to { position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%) scale(0); } }
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta http-equiv="X-UA-Compatible" content="IE=edge"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <link rel="stylesheet" href="style.css"> <title>Document</title> </head> <body> <div class="btn"><button>Press Me</button></div> <div class="popup"> <div class="sentence">Hello Nice to Meet You!</div> <div class="btn"><button>Close</button></div> </div> <div class="overlay"></div> <script src="app.js"></script> </body> </html>
解決方案2
2 2022-06-21 10:31:24
這是因為您正在添加open類和overlay-open類，並且永遠不會刪除它們。 因此，在關閉后，您在<div class="popup">上有open和popClose ，在 <div class= <div class="overlay"> > 上有了overlay-open和overlay-close 。
而 CSS 的特殊性使得第二類適用。 你可以做如下，有 2 個類而不是 4 個。你只需要open和overlay-open 。
const btn= document.querySelector('.btn'); const cloBtn=document.querySelector('.close'); const popUp=document.querySelector('.popup'); const overlay=document.querySelector('.overlay'); btn.addEventListener('click',()=>{ popUp.classList.add('open'); overlay.classList.add('overlay-open'); }); cloBtn.addEventListener('click',()=>{ popUp.classList.remove('open'); overlay.classList.remove('overlay-open'); })
body{ margin: 0%; } .btn{ position: absolute; top: 50%; left: 50%; transform: translate(-50% ,-50%); } button{ border: none; cursor: pointer; } .btn button{ background-color: blue; padding: 15px 45px 15px 45px; font-size: large; font-weight: 700; color: rgb(255, 255, 255); border-radius: 10px; } .popup{ width: 300px; background-color: rgb(228, 228, 228); height: 150px; display: flex; justify-content: center; flex-direction: column; align-items: center; gap: 15px; border-radius:10px ; z-index: 5; position: absolute; top: 30%; left: 50%; transform:scale(1) translate(-50% ,-50%); visibility: hidden; } .popup button{ background-color: rgb(255, 0, 55); padding: 10px 30px 10px 30px; font-size: medium; font-weight: 700; color: rgb(0, 0, 0); border-radius: 10px; } .overlay{ height: 100%; width: 100%; background-color: rgba(133, 131, 131, 0.555); position: absolute; z-index: 2; visibility: hidden; } .overlay-open{ visibility: visible; } /* .overlay-close{ visibility: hidden; }*/ .open{ visibility: visible; animation: boxPop 0.3s ease-in; } @keyframes boxPop { from { position: absolute; top: 50%; left: 50%; transform:translate(-50% ,-50%) scale(0); } to { position: absolute; top: 30%; left: 50%; transform:scale(1) translate(-50% ,-50%); } } /* .popClose{ animation: boxClo 0.3s ease-in; transform:translate(-50% ,-50%) scale(0); }*/ @keyframes boxClo { from { position: absolute; top: 30%; left: 50%; transform:scale(1) translate(-50% ,-50%); } to { position: absolute; top: 50%; left: 50%; transform:translate(-50% ,-50%) scale(0); } }
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta http-equiv="X-UA-Compatible" content="IE=edge"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <link rel="stylesheet" href="style.css"> <title>Document</title> </head> <body> <div class="btn"><button>Press Me</button></div> <div class="popup"> <div class="sentence">Hello Nice to Meet You!</div> <div class="close"><button>Close</button></div> </div> <div class="overlay"></div> <script src="app.js"></script> </body> </html>
解決方案3
2 2022-06-21 10:33:27
您必須在每個函數執行后刪除舊類才能正常工作。
const btn= document.querySelector('.btn'); const cloBtn=document.querySelector('.close'); const popUp=document.querySelector('.popup'); const overlay=document.querySelector('.overlay'); btn.addEventListener('click',()=>{ popUp.classList.add('open'); overlay.classList.add('overlay-open'); popUp.classList.remove('popClose'); overlay.classList.remove('overlay-close') }); cloBtn.addEventListener('click',()=>{ popUp.classList.remove('open'); overlay.classList.remove('overlay-open'); popUp.classList.add('popClose'); overlay.classList.add('overlay-close'); })
body{ margin: 0%; } .btn{ position: absolute; top: 50%; left: 50%; transform: translate(-50% ,-50%); } button{ border: none; cursor: pointer; } .btn button{ background-color: blue; padding: 15px 45px 15px 45px; font-size: large; font-weight: 700; color: rgb(255, 255, 255); border-radius: 10px; } .popup{ width: 300px; background-color: rgb(228, 228, 228); height: 150px; display: flex; justify-content: center; flex-direction: column; align-items: center; gap: 15px; border-radius:10px ; z-index: 5; position: absolute; top: 30%; left: 50%; transform:scale(1) translate(-50% ,-50%); visibility: hidden; } .popup button{ background-color: rgb(255, 0, 55); padding: 10px 30px 10px 30px; font-size: medium; font-weight: 700; color: rgb(0, 0, 0); border-radius: 10px; } .overlay{ height: 100%; width: 100%; background-color: rgba(133, 131, 131, 0.555); position: absolute; z-index: 2; visibility: hidden; } .overlay-open{ visibility: visible; } .overlay-close{ visibility: hidden; } .open{ visibility: visible; animation: boxPop 0.3s ease-in; } @keyframes boxPop { from { position: absolute; top: 50%; left: 50%; transform:translate(-50% ,-50%) scale(0); } to { position: absolute; top: 30%; left: 50%; transform:scale(1) translate(-50% ,-50%); } } .popClose{ animation: boxClo 0.3s ease-in; transform:translate(-50% ,-50%) scale(0); } @keyframes boxClo { from { position: absolute; top: 30%; left: 50%; transform:scale(1) translate(-50% ,-50%); } to { position: absolute; top: 50%; left: 50%; transform:translate(-50% ,-50%) scale(0); } }
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta http-equiv="X-UA-Compatible" content="IE=edge"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <link rel="stylesheet" href="style.css"> <title>Document</title> </head> <body> <div class="btn"><button>Press Me</button></div> <div class="popup"> <div class="sentence">Hello Nice to Meet You!</div> <div class="close"><button>Close</button></div> </div> <div class="overlay"></div> <script src="app.js"></script> </body> </html>
刷新/進入網站后，如何讓靜音/取消靜音按鈕僅出現在頁面的適當部分？
[英]How to let mute/unmute button appears only in a proper section of the page once I refresh/enter the site?
聲明:本站的技術帖子網頁，遵循CC BY-SA 4.0協議，如果您需要轉載，請注明本站網址或者原文地址。任何問題請咨詢:yoyou2525@163.com.