javascript - CSS-网格、JS-鼠标 onClick 事件

Question

在我的 HTML 中，我有一个父 div，其中有 25 个 div。

<div class="container>
  <div class="faces"></div>
  <div class="faces"></div>
  <div class="faces"></div>
  .
  .
  .
  .
  .
</div>

我正在使用 CSS 网格

.container {
    display: grid;
    grid-template-columns: repeat(5, auto);
    margin: 2% auto;
    width: 750px;
    grid-gap: 1px;
}

.container > div {
    overflow: hidden;
    height: 150px;
    border: 1px solid;
}

.faces img {
    height: 150px;
}   

这给了我每行 5 个 div。

现在，当我单击任何 div 时，我希望它展开

$('.faces').click(function() {
  $(this).css('grid-column','span 3');
  $(this).css('grid-row','span 2');
  $(this).css('height','auto');
}):

这个 JS 确实有效。但我只希望单击的元素具有这样的 css 属性。 当单击另一个 div 时，前一个 div 应该收回其位置。

我该怎么做？

Answer 1

我为您做了一个示例(只需单击红色框即可):

var lastClickedFace = null;

$(".faces").click(function(e) {
 if (lastClickedFace) {
  $(lastClickedFace).css("background-color", "red");
 }
  
 $(this).css("background-color", "green");
  
 lastClickedFace = this;
});

.faces {
  width: 20px;
  height: 20px;
  background-color: red;
  margin-top: 20px;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div id="container">
  <div class="faces"></div>
  <div class="faces"></div>
  <div class="faces"></div>
  <div class="faces"></div>
</div>

关键是，要保存“最后点击的脸”。在本例中，我们只需将其分配给名为“lastClickedFace”的变量。

下次您点击任何面孔时，我们会检查此变量是否不为空(这意味着我们有一个“上次点击的面孔”)。