网格，JS

在我的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我希望它扩大

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

这个JS确实有用。 但我只想要点击的元素具有这样的CSS属性。 当另一个div被点击时，之前应该收回它的位置。

我该怎么做？

---

您可以先从所有面中删除样式属性，然后设置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

在这里你可以阅读关于从元素中删除样式属性。 https://stackoverflow.com/a/16462898/7111755

---

还有一个更好的解决方案。 你可以简单地在JQuery中使用removeClass和addClass。 所以你可以使用扩展div的属性创建一个类。

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

在css中定义expand类

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

---

我为你做了一个例子（只需点击红色框）：

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>

链接地址: http://www.djcxy.com/p/94879.html

上一篇: grid, JS

下一篇: How to wait for effect queue to complete in jQuery call sequence