CSS-grid、JS-mouse onClick 事件

Question

在我的 HTML 里，我有一个 parent 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 时，前一个应收回其位置。

我该怎么做？

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>

关键是，要保存"last clicked face"。在这种情况下，我们只是将它分配给一个名为 "lastClickedFace".

的变量

下次您点击任何面孔时，我们会检查此变量是否为 NOT null（这意味着我们有 "last clicked face"）。

Answer 2

您可以先删除所有面的样式属性，然后设置 css 属性。

试试下面的方法。

$('.faces').click(function() {
  $('.faces').removeAttr('style');
  $(this).css('grid-column','span 3');
  $(this).css('grid-row','span 2');
  $(this).css('height','auto');
}); //<-- In your solution is a colon instead of semicolon

在这里您可以阅读有关从元素中删除样式属性的信息。

还有更好的解决办法。您可以简单地在 JQuery 中使用 removeClass and addClass。因此，您可以制作一个具有扩展 div.

属性的 class

$('.faces').click(function() {
  $('.faces').removeClass('expand');
  $(this).addClass('expand');
});

在css

中定义expandclass

  .expand{
     grid-column: span 3;
     grid-row: span 2;
     height: auto;
  }

CSS-grid、JS-mouse onClick 事件

CSS-grid, JS-mouse onClick event

javascript

jquery

html

css

css-grid