单击事件更改网格布局答案

【问题标题】：change grid layout on click event单击事件更改网格布局
【发布时间】：2019-04-18 05:48:05
【问题描述】：

是否可以在单击事件上更改网格布局？我有一个三行的网格显示，我希望在单击行中的项目时将网格更改为三列。

.gridcontainer {
  display: grid;
  grid-template-rows: 1fr 1fr 1fr;
  justify-content: center;
}

.gridcontainer {
  display: grid;
  grid-template-columns: 1fr 4fr 1fr;
  justify-content: center;
}

<div class="gridcontainer">
  <div class="item">Item</div>
  <div class="item">Item</div>
  <div class="item">Item</div>
  <div class="item">Item</div>
  <div class="item">Item</div>
  <div class="item">Item</div>
</div>

在任何项目上的单击事件中，我希望网格显示从三行更改为三列。

【问题讨论】：

只有一次？或者每次你点击item它应该从row反转到column和column到row。
每次点击一个项目
因为有 6 个项目，在 3 列 - 2 行和 3 行 - 2 列之间切换？

标签： javascript html css css-grid

【解决方案1】：

创建两个单独的类：

.row {
  grid-template-rows: 1fr 1fr 1fr;
}

.col {
  grid-template-columns: 1fr 4fr 1fr;
}

在每次点击时切换.gridcontainer 上的每个课程。详情见demo。

// Reference the .gridcontainer
var grid = document.querySelector('.gridcontainer');

// Register click event to grid callback rowCol runs on click
grid.onclick = rowCol;

/* 
Callback function rowCol() passes the Event Object...
if the clicked element (e.target) .matches() class .item...
get the clicked element's (ie .item) .closest() element .gridcontainer and 
add/remove class .col or .row
*/
function rowCol(e) {
  if (e.target.matches('.item')) {
    e.target.closest('.gridcontainer').classList.toggle('row');
    e.target.closest('.gridcontainer').classList.toggle('col');
  }
  return false;
}

.gridcontainer {
  display: grid;
  justify-content: center;
}

.row {
  grid-template-rows: 1fr 1fr 1fr;
}

.col {
  grid-template-columns: 1fr 4fr 1fr;
}

<div class="gridcontainer row">
  <div class="item">Item</div>
  <div class="item">Item</div>
  <div class="item">Item</div>
  <div class="item">Item</div>
  <div class="item">Item</div>
  <div class="item">Item</div>
</div>

【讨论】：

我尝试过，但在控制台上出现错误 TypeError: grid is null。来自js文件的错误
@sum 检查 gridcontainer 在 JS、HTML 和 CSS 中出现的任何地方的拼写。如果您将该 className 更改为不易出错的名称，它可能会为您提供更好的服务。将gridcontainer 转换为grid，或grid-container，或gridContainer。

【解决方案2】：

如果您询问活动的外观，您可以看到：

$( "#grid" ).on( "click", function() {
  $( this ).css( "grid-template-columns", "1fr 4fr 1fr" );
});

你可以看看这个answer

【讨论】：

【解决方案3】：

你云试试这个纯js

let gridContainer = document.querySelector('.gridContainer')
gridContainer.addEventListener("click", function(){
gridContainer.classList.toggle("style_for_row"); // if active its put to off
gridContainer.classList.toggle("style_for_colomn");// and if off put to on
});  //so on every click your changing the className

在 css 中你可以有两个类

style_for_row{grid-template-rows: 1fr 1fr 1fr;}
style_for_column{grid-template-columns: 1fr 1fr 1fr;}
.gridcontainer {
 display: grid;
 justify-content: center;}

html 会是这样的

<div class="gridcontainer style_for_column">
    <div class="item">Item</div>
    <div class="item">Item</div>
    <div class="item">Item</div>
    <div class="item">Item</div>
    <div class="item">Item</div>
    <div class="item">Item</div></div>

【讨论】：