grid, JS

In my HTML, I have one parent div and have 25 div's inside it.

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

I'm using CSS grids

.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;
}   

This gives me 5 div in each row.

Now when I click on any div I want it to expand

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

This JS does work. But i just want only the clicked element to have such css property. When another div is clicked the previous should take back its position.

How do I do it?

---

You could first remove the style attribute from all faces and then set the css properties.

Try the following.

$('.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

Here you can read about removing the style attribute from an element. https://stackoverflow.com/a/16462898/7111755

---

There is also a better solution. You can simply use removeClass and addClass in JQuery. So you could make one class with the properties for expanding the div.

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

Define the expand class in css

  .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/94880.html

上一篇: JQuery删除添加的样式

下一篇: 网格，JS