javascript - CSS-grid, JS-mouse 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”的变量。

下次您点击任何人脸时，我们会检查此变量是否为 NOT null(这意味着我们有一张“最后点击的人脸”)。