[英]I added a click effect to my calculator keys but when you click one of them the others move too!! Can you help me?
就像我在标题中写的那样，当您单击其中一个键时，同一列中的其他键也会移动。 我怎么解决这个问题？ 当您单击一个键时，我希望它们留在原处。 在尊重空格的同时应该有“按钮点击效果”：我希望代码足够清晰，我将计算器分为两部分。 屏幕和键盘。 你可以在键盘部分找到我的问题！
谢谢！
const keys = document.querySelectorAll('#keys-container div'); keys.forEach(key => key.addEventListener('mousedown', () => key.classList.add('press-div') )); keys.forEach(key => key.addEventListener('mouseup', () => key.classList.remove('press-div') ));
body { display: flex; flex-direction: column; justify-content: center; align-items: center; height: 100vh; } body > div { border: 1px solid black; } #display-container { display: flex; flex-direction: column; justify-content: center; align-items: center; height: 142px; width: 440px; } #display-border { border: 1px solid black; display: flex; flex-direction: column; justify-content: center; align-items: center; height: 80px; width: 410px; } #display { border: 1px solid black; height: 70px; width: 400px; } #keyboard { display: flex; flex-direction: column; justify-content: center; align-items: center; height: 420px; width: 440px; } #keys-container { display: flex; flex-direction: column; flex-wrap: wrap; align-items: center; justify-content: center; border: 1px solid black; gap: 12px; height: 377px; width: 410px; } #keys-container div { display: flex; justify-content: center; align-items: center; /*box-sizing: border-box;*/ border: 1px solid black; border-bottom: 3px solid black; height: 60px; width: 80px; transition: 0.01s; } #keys-container.press-div { border-bottom: 1px solid black; }
<body> <div id="display-container"> <div id="display-border"> <div id="display"></div> </div> </div> <div id="keyboard"> <div id="keys-container"> <div>ON/C</div> <div>7</div> <div>4</div> <div>1</div> <div>0</div> <div>CE</div> <div>8</div> <div>5</div> <div>2</div> <div>⋅</div> <div>±</div> <div>9</div> <div>6</div> <div>3</div> <div>=</div> <div>÷</div> <div>×</div> <div>−</div> <div style="height: 136px">+</div> </div> </div> </body>
好吧，当您减小键底部的边框大小时，您会减小内容的高度，将其下方的所有内容向上移动以填充 2px 空间。
只需通过将 2px 边框替换为边距来保持空间一致。
#keys-container .press-div {
border-bottom: 1px solid black;
margin-bottom: 2px;
}
在您当前的 CSS 中， border （以及padding ）不计入总元素高度，这会在更改border-bottom值时导致抖动。
添加* { box-sizing: border-box }到您的 CSS 将解决问题，因为边框和填充值现在将计为总元素宽度/高度的一部分。 参考MDN：box-sizing 。
检查片段中 CSS 的第一行：
const keys = document.querySelectorAll('#keys-container div'); keys.forEach(key => key.addEventListener('mousedown', () => key.classList.add('press-div'))); keys.forEach(key => key.addEventListener('mouseup', () => key.classList.remove('press-div')));
* { box-sizing: border-box } body { display: flex; flex-direction: column; justify-content: center; align-items: center; height: 100vh; } body>div { border: 1px solid black; } #display-container { display: flex; flex-direction: column; justify-content: center; align-items: center; height: 142px; width: 440px; } #display-border { border: 1px solid black; display: flex; flex-direction: column; justify-content: center; align-items: center; height: 80px; width: 410px; } #display { border: 1px solid black; height: 70px; width: 400px; } #keyboard { display: flex; flex-direction: column; justify-content: center; align-items: center; height: 420px; width: 440px; } #keys-container { display: flex; flex-direction: column; flex-wrap: wrap; align-items: center; justify-content: center; border: 1px solid black; gap: 12px; height: 377px; width: 410px; } #keys-container div { display: flex; justify-content: center; align-items: center; /*box-sizing: border-box;*/ border: 1px solid black; border-bottom: 3px solid black; height: 60px; width: 80px; transition: 0.01s; } #keys-container.press-div { border-bottom: 1px solid black; }
<div id="display-container"> <div id="display-border"> <div id="display"></div> </div> </div> <div id="keyboard"> <div id="keys-container"> <div>ON/C</div> <div>7</div> <div>4</div> <div>1</div> <div>0</div> <div>CE</div> <div>8</div> <div>5</div> <div>2</div> <div>⋅</div> <div>±</div> <div>9</div> <div>6</div> <div>3</div> <div>=</div> <div>÷</div> <div>×</div> <div>−</div> <div style="height: 136px">+</div> </div> </div>
我想在单击跨度时找到最接近跨度的输入元素，你能帮我吗？
[英]I want to find an input element closest a span when I click the span, can you help me?
我在我的小项目 Calculator 上执行 JavaScript 实现时遇到了一些错误。 伙计们，你能帮帮我吗？
[英]I am encountering some errors while doing the JavaScript implementation on my little project, Calculator. Can you help me, guys?
当用户点击登录时，它应该重定向到反应 js 中的谷歌页面登录你能帮我解决这个问题吗
[英]When a user click on Login it should redirect to login with google page in react js Can you help me resolve this issue
当我单击下面给出的代码中的计算按钮时，有人可以帮助我如何更改添加到输入框中的伪跨度的颜色
[英]Can someone help me how to change the color of pseudo span added to the input box when I click on calculate button in code given below
我可以在iFrame中加载域吗？单击链接后，该域会在父窗口中打开，而不是在iframe中打开吗？
[英]Can I load a domain in my iFrame and when you click a link, it opens in the parent window, not the iframe?
声明:本站的技术帖子网页，遵循CC BY-SA 4.0协议，如果您需要转载，请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.