当数字被圈(最好是CSS)时，删除故障

我正在生成一个数字表，如下面的代码片段所示。我面临的问题是，当一个数字(或单元格)被点击，它得到类black，其次是circle，然后是number反复。

当circle类激活时;具有特定数字的列被2px稍微加宽。这是因为从上述类的border属性接收到额外的2px。

这个可以解决吗?我真的希望值在相对上下文中，例如:% s, em s等，而不是px或pt。

Classes = ['number', 'black', 'circle'];
$('.td').on('click', function(e) {
  e.preventDefault();
  var $span = $(this).children('span');
  var state = $span.data('state');
  $span.removeClass(Classes[state]);
  state = ++state % 3;
  console.log(state);
  $span.data('state', state).addClass(Classes[state]);
});

* {
  font-size: 1em;
}
#game {
  display: table;
}
.tr {
  display: table-row;
}
.td {
  display: table-cell;
  margin: 1em;
  padding: .5em;
  border: 1px solid black;
  cursor: pointer;
  -webkit-touch-callout: none;
  -webkit-user-select: none;
  -moz-user-select: none;
  user-select: none;
}
.number,
.black,
.circle {
  padding: .5em;
  font-weight: bold;
  text-align: center;
  vertical-align: center;
  transition: ease 1s;
}
.black {
  color: white;
  background-color: rgba(50, 50, 50, 0.8);
}
.circle {
  border-radius: 50%;
  border: 1px solid black;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div id='game'>
  <div class='tr'>
    <div class='td'><span class='number' data-state='0'>4</span>
    </div>
    <div class='td'><span class='number' data-state='0'>5</span>
    </div>
    <div class='td'><span class='number' data-state='0'>1</span>
    </div>
    <div class='td'><span class='number' data-state='0'>2</span>
    </div>
    <div class='td'><span class='number' data-state='0'>4</span>
    </div>
  </div>
  <div class='tr'>
    <div class='td'><span class='number' data-state='0'>5</span>
    </div>
    <div class='td'><span class='number' data-state='0'>4</span>
    </div>
    <div class='td'><span class='number' data-state='0'>3</span>
    </div>
    <div class='td'><span class='number' data-state='0'>2</span>
    </div>
    <div class='td'><span class='number' data-state='0'>1</span>
    </div>
  </div>
  <div class='tr'>
    <div class='td'><span class='number' data-state='0'>3</span>
    </div>
    <div class='td'><span class='number' data-state='0'>3</span>
    </div>
    <div class='td'><span class='number' data-state='0'>2</span>
    </div>
    <div class='td'><span class='number' data-state='0'>1</span>
    </div>
    <div class='td'><span class='number' data-state='0'>4</span>
    </div>
  </div>
  <div class='tr'>
    <div class='td'><span class='number' data-state='0'>1</span>
    </div>
    <div class='td'><span class='number' data-state='0'>4</span>
    </div>
    <div class='td'><span class='number' data-state='0'>5</span>
    </div>
    <div class='td'><span class='number' data-state='0'>3</span>
    </div>
    <div class='td'><span class='number' data-state='0'>2</span>
    </div>
  </div>
  <div class='tr'>
    <div class='td'><span class='number' data-state='0'>5</span>
    </div>
    <div class='td'><span class='number' data-state='0'>1</span>
    </div>
    <div class='td'><span class='number' data-state='0'>2</span>
    </div>
    <div class='td'><span class='number' data-state='0'>4</span>
    </div>
    <div class='td'><span class='number' data-state='0'>4</span>
    </div>
  </div>
</div>

作为题外话，我还想要一个解决方案(如果可能的话):

当black状态时，父div整体上应该得到黑色背景。
圆圈(以及black类的黑色背景)触及其所在单元格的边界。这个问题能解决吗?

宽度和高度的变化是因为你添加了一个1px宽度的border，当圆圈类被添加。最初不存在这种情况，因此会影响大小。为了解决这个问题，你可以添加一个透明的1px边框作为元素的默认值。

对于另外两个问题，为span元素设置display: inline-block，并取消td元素的填充，将使背景色完全应用于元素。父内容上的填充总是意味着它和子内容之间有一个空格。当我们将background应用于子div时，该空间不会被着色。

注意:我已经将子元素的内边距从0.5em增加到0.5em 1em，以调整从父元素移除的内边距。

Classes = ['number', 'black', 'circle'];
$('.td').on('click', function(e) {
  e.preventDefault();
  var $span = $(this).children('span');
  var state = $span.data('state');
  $span.removeClass(Classes[state]);
  state = ++state % 3;
  console.log(state);
  $span.data('state', state).addClass(Classes[state]);
});

* {
  font-size: 1em;
}
#game {
  display: table;
}
.tr {
  display: table-row;
}
.td {
  display: table-cell;
  margin: 1em;
  border: 1px solid black;
  cursor: pointer;
  -webkit-touch-callout: none;
  -webkit-user-select: none;
  -moz-user-select: none;
  user-select: none;
}
.number,
.black,
.circle {
  padding: .5em 1em;
  font-weight: bold;
  text-align: center;
  vertical-align: center;
  transition: ease 1s;
  border: 1px solid transparent;
}
.black {
  color: white;
  background-color: rgba(50, 50, 50, 0.8);
}
.circle {
  border-radius: 50%;
  border: 1px solid black;
}
span {
  display: inline-block;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div id='game'>
  <div class='tr'>
    <div class='td'><span class='number' data-state='0'>4</span>
    </div>
    <div class='td'><span class='number' data-state='0'>5</span>
    </div>
    <div class='td'><span class='number' data-state='0'>1</span>
    </div>
    <div class='td'><span class='number' data-state='0'>2</span>
    </div>
    <div class='td'><span class='number' data-state='0'>4</span>
    </div>
  </div>
  <div class='tr'>
    <div class='td'><span class='number' data-state='0'>5</span>
    </div>
    <div class='td'><span class='number' data-state='0'>4</span>
    </div>
    <div class='td'><span class='number' data-state='0'>3</span>
    </div>
    <div class='td'><span class='number' data-state='0'>2</span>
    </div>
    <div class='td'><span class='number' data-state='0'>1</span>
    </div>
  </div>
  <div class='tr'>
    <div class='td'><span class='number' data-state='0'>3</span>
    </div>
    <div class='td'><span class='number' data-state='0'>3</span>
    </div>
    <div class='td'><span class='number' data-state='0'>2</span>
    </div>
    <div class='td'><span class='number' data-state='0'>1</span>
    </div>
    <div class='td'><span class='number' data-state='0'>4</span>
    </div>
  </div>
  <div class='tr'>
    <div class='td'><span class='number' data-state='0'>1</span>
    </div>
    <div class='td'><span class='number' data-state='0'>4</span>
    </div>
    <div class='td'><span class='number' data-state='0'>5</span>
    </div>
    <div class='td'><span class='number' data-state='0'>3</span>
    </div>
    <div class='td'><span class='number' data-state='0'>2</span>
    </div>
  </div>
  <div class='tr'>
    <div class='td'><span class='number' data-state='0'>5</span>
    </div>
    <div class='td'><span class='number' data-state='0'>1</span>
    </div>
    <div class='td'><span class='number' data-state='0'>2</span>
    </div>
    <div class='td'><span class='number' data-state='0'>4</span>
    </div>
    <div class='td'><span class='number' data-state='0'>4</span>
    </div>
  </div>
</div>

如果你不想让圆圈接触网格的所有边，做以下修改:

.number, .black, .circle {
  margin: .1em;
  padding: .4em .9em;
}
.black {
  box-shadow: 0 0 0 .1em black;
}

相关内容

最新更新

热门标签：