CSS-сетка, событие 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, я хочу его расширить

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

Этот JS действительно работает. Но я просто хочу, чтобы только элемент clicked имел такое свойство css. При нажатии другого элемента div предыдущий должен вернуть свою позицию.

Как мне это сделать?

Answer 1

Вы можете сначала удалить атрибут style со всех граней, а затем установить свойства 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

Здесь вы можете прочитать об удалении атрибута style из элемента. /questions/33011395/kak-udalit-stil-dobavlennyij-s-pomoschyu-funktsiicss/33011415#33011415

---

Есть и лучшее решение. Вы можете просто использовать removeClass и addClass в JQuery. Таким образом, вы можете создать один класс со свойствами для расширения div.

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

Определите expand класс в css

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

Answer 2

Я сделал для вас пример (просто нажмите на красные прямоугольники):

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".

В следующий раз, когда вы щелкнете по любому лицу, мы проверим, не является ли эта переменная нулевой (это означает, что у нас было "лицо, которое было нажато последним").