Question

长话短说，我制作了一个简单的Tic Tac Toe游戏，其中Player1点击了他的动作，而Player2则点击了他的动作。 Clear div只是为了清除电路板。这很简单。我唯一的问题是，当点击时，Clear Div的高度增加。它仍然有效，但从苦行的角度来看并不具吸引力。发生了什么事？

HTML

<table>
  <tr></tr>
    <td><div class="dot"></div></td>
    <td><div class="dot"></div></td>
    <td><div class="dot"></div></td>
  <tr></tr>
    <td><div class="dot"></div></td>
    <td><div class="dot"></div></td>
    <td><div class="dot"></div></td>
  <tr></tr>
    <td><div class="dot"></div></td>
    <td><div class="dot"></div></td>
    <td><div class="dot"></div></td>
</table>
<body>
  <div id="clear">Clear</div>
</body>

CSS

table{
  margin-left:auto; 
  margin-right:auto;
  border-spacing:7px;
}
.dot{
  border-radius:50px;
  height:100px;
  width:100px;
  background-color:#A8A8A8;
}
.playerOne{
  border-radius:50px;
  height:100px;
  width:100px;
  background-color:red;
}
.playerTwo{
  border-radius:50px;
  height:100px;
  width:100px;
  background-color:blue;
}
#clear{
  border-radius:50px;
  width:300px;
  padding:10px;
  font-size:30px;
  background-color:#A8A8A8;
  text-align:center;
  margin-right:auto;
  margin-left:auto;
}
#clear:active{
  border: 2px solid black; 
}

的JavaScript

$(document).ready(function(){

  $('div').click(function() {
    $(this).addClass('playerOne');
  });
  $('div').dblclick(function() {
    $(this).addClass('playerTwo');
  });


  $('#clear').click(function(){
    $('.dot').removeClass('playerOne');
  });
  $('#clear').click(function(){
    $('.dot').removeClass('playerTwo');
  });

}）;

Answer 1

前两行应更改为

 $('.dot').click(function() {
     $(this).addClass('playerOne');
 });
 $('.dot').dblclick(function() {
     $(this).addClass('playerTwo');
 });

您在点击时将播放器类添加到任何div，清除按钮是div。＆＃39; .dot＆＃39;选择任何类别为＆＃39; dot＆＃39;

的内容

Answer 2

高度可能增加约2-4px？这是因为您的active类添加了此内容：

  border: 2px solid black;

要修复它，您可以将这些值添加到要动态添加边距/填充的div中：

-moz-box-sizing: border-box; 
-webkit-box-sizing: border-box; 
box-sizing: border-box;

Answer 3

这个怎么样：jsFiddle

我修复了你的CSS样式。有很多redondant属性。我添加了一些属性来禁用dblclick上的选择。我也清理了你的javascript代码。

通过向#clear课程添加透明边框，我修复了边框问题（Formic的解决方案在我的Chrome上无效）。然后，当出现边框黑色时，尺寸保持不变。

#clear{
  border-radius:50px;
  width:300px;
  padding:10px;
  font-size:30px;
  background-color:#A8A8A8;
  text-align:center;
  margin-right:auto;
  margin-left:auto;
  border: 2px solid rgba(0,0,0,0); // here is the trick!
}
#clear:active{
  border: 2px solid black; 
}

单击时为什么我的div会放大？

3 个答案: