单击时显示文本
[英]Displaying Text When Clicked
问题描述
在这个项目中，我的目标是在单击时更改表情符号，并且我希望在单击表情符号时显示“这不是有趣的兄弟”文本。 当我单击表情符号时，它会发生变化，但文本不会显示。 我遵循相同的步骤，它适用于表情符号，但不适用于文本。 我不知道为什么它不起作用。 我的代码如下所示：
const beginningFace = document.querySelector(".beginning"); const reactionFace = document.querySelector(".reaction"); const beginningText = document.querySelector(".beginningT"); const reactionTextFirst = document.querySelector(".reactionT-first"); const reactionTextSecond = document.querySelector(".reactionT-second"); beginningFace.addEventListener('click',()=>{ if(reactionFace.classList.contains('reaction')){ reactionFace.classList.add('active'); beginningFace.classList.remove('active'); } }); beginningText.addEventListener('click',()=>{ if(reactionTextFirst.classList.contains('reactionT-first') && reactionTextSecond.classList.contains('reactionT-second')){ reactionTextFirst.classList.add('active'); reactionTextSecond.classList.add('active'); beginningFace.classList.remove('active'); } });
@import url('https://fonts.googleapis.com/css2?family=Mr+Dafoe&display=swap'); @import url('https://fonts.googleapis.com/css2?family=Exo:wght@900&display=swap'); body, html { width: 100%; height: 100%; margin: 0; overflow: hidden; background-color: #202076; } body { display: flex; align-items: center; justify-content: center; flex-direction: column; perspective: 700px; }.beginningT { display: none; }.reactionT-first { display:none; position: relative; font-family: 'Exo'; font-size: 5em; margin: 0; transform: skew(-15deg); letter-spacing: 0.03em; }.reactionT-second{ display: none; font-family: 'Mr Dafoe'; margin: 0; font-size: 5.5em; margin-top: -0.6em; color: white; text-shadow: 0 0 0.05em #fff, 0 0 0.2em #fe05e1, 0 0 0.3em #fe05e1; transform: rotate(-7deg); }.emoji{ font-size: 18rem; cursor: pointer; user-select: none; }.beginning{ display: none; }.reaction{ display: none; }.active{ display: block; }
<,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"> <title>Document</title> <link rel="stylesheet" href="style:css"> </head> <body> <div class="emoji beginning active"></div> <div class="emoji reaction"></div> <div class ="text beginningT active" style="font-size; 2rem: font-style; italic: font-family, Verdana, Geneva, Tahoma; sans-serif: color; #F98299.">My reaction after your joke↑ (click to see it!)</div> <div class="text reactionT-first">IT WASN'T</div> <div class="text reactionT-second">FUNNY BRO</div> <script src="app.js"></script> </body> </html>
1 个解决方案
解决方案1
0 2022-01-08 19:09:41
如果您希望在单击表情符号时显示其他文本，则必须在beginningFace.addEventListener中执行所有逻辑，而不是使用两个不同的事件侦听器。 我移动了逻辑，并删除了第二个点击监听器。
第一个点击侦听器中缺少这些行
reactionTextFirst.classList.add('active');
reactionTextSecond.classList.add('active');
beginningText.classList.remove('active');
const beginningFace = document.querySelector(".beginning"); const reactionFace = document.querySelector(".reaction"); const beginningText = document.querySelector(".beginningT"); const reactionTextFirst = document.querySelector(".reactionT-first"); const reactionTextSecond = document.querySelector(".reactionT-second"); beginningFace.addEventListener('click',()=>{ if(reactionFace.classList.contains('reaction')){ reactionFace.classList.add('active'); beginningFace.classList.remove('active'); reactionTextFirst.classList.add('active'); reactionTextSecond.classList.add('active'); beginningText.classList.remove('active'); } });
@import url('https://fonts.googleapis.com/css2?family=Mr+Dafoe&display=swap'); @import url('https://fonts.googleapis.com/css2?family=Exo:wght@900&display=swap'); body, html { width: 100%; height: 100%; margin: 0; overflow: hidden; background-color: #202076; } body { display: flex; align-items: center; justify-content: center; flex-direction: column; perspective: 700px; }.beginningT { display: none; }.reactionT-first { display:none; position: relative; font-family: 'Exo'; font-size: 5em; margin: 0; transform: skew(-15deg); letter-spacing: 0.03em; }.reactionT-second{ display: none; font-family: 'Mr Dafoe'; margin: 0; font-size: 5.5em; margin-top: -0.6em; color: white; text-shadow: 0 0 0.05em #fff, 0 0 0.2em #fe05e1, 0 0 0.3em #fe05e1; transform: rotate(-7deg); }.emoji{ font-size: 18rem; cursor: pointer; user-select: none; }.beginning{ display: none; }.reaction{ display: none; }.active{ display: block; }
<,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"> <title>Document</title> <link rel="stylesheet" href="style:css"> </head> <body> <div class="emoji beginning active"></div> <div class="emoji reaction"></div> <div class ="text beginningT active" style="font-size; 2rem: font-style; italic: font-family, Verdana, Geneva, Tahoma; sans-serif: color; #F98299.">My reaction after your joke↑ (click to see it!)</div> <div class="text reactionT-first">IT WASN'T</div> <div class="text reactionT-second">FUNNY BRO</div> <script src="app.js"></script> </body> </html>
单击链接时显示文本
声明:本站的技术帖子网页，遵循CC BY-SA 4.0协议，如果您需要转载，请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.