删除网格上隐藏项的空格

Question

我正在为一个使用网格显示不同可购买物品的网站制作目录。现在我有一个功能，可以通过单击图像来隐藏网格中的某些项目。但是，单击时，仍然可见的项目将保留在网格中的原始位置。因此，如果我有 6 个项目分布在 2 行和 3 列中，如下所示：

1 2 3
4 5 6

然后执行该功能，假设隐藏可除以 2 的数字，网格如下所示

1   3
  5

有没有办法让网格看起来像这样？

1 3 5

我正在使用显示="无"来隐藏项目。

下面是代码的简化版本：

var ChangeLayout = function(rarity) {
  var listItemContainers = document.getElementsByClassName("itemContainer");
  var listItemContainersByRarity = document.getElementsByClassName(rarity);
  var j;
  var h;
  if (rarity == 'all') {
    for (j = 0; j < listItemContainers.length; j++) {
      document.getElementsByClassName("itemContainer")[j].style.display = 'block';
    }
  } else {
    for (j = 0; j < listItemContainers.length; j++) {
      document.getElementsByClassName("itemContainer")[j].style.display = 'none';
    }
    for (h = 0; h < listItemContainersByRarity.length; h++) {
      document.getElementsByClassName(rarity)[h].style.display = 'block';
    }
  }
}

#catalogGrid {
  display: grid;
  grid-auto-flow: row;
  grid-template-columns: repeat(3, 1fr);
  grid-column-gap: 5px;
  grid-row-gap: 5px;
}

<img id="gemStoneAll" onclick="ChangeLayout('all')" />
<img id="gemStoneUncommon" onclick="ChangeLayout('uncommon')" />
<img id="gemStoneRare" onclick="ChangeLayout('rare')" />
<img id="gemStoneVeryRare" onclick="ChangeLayout('veryrare')" />
<ul id=catalogGrid>
  <li>
    <div class="itemContainer rare">
    </div>
  </li>
  <li>
    <div class="itemContainer veryrare">
    </div>
  </li>
  <li>
    <div class="itemContainer uncommon">
    </div>
  </li>
  <li>
    <div class="itemContainer uncommon">
    </div>
  </li>
  <li>
    <div class="itemContainer rare">
    </div>
  </li>
  <li>
    <div class="itemContainer rare">
    </div>
  </li>
</ul>

在 JSFiddle 上查看

Answer 1

> <li> 元素不会显示/隐藏，因为您正在更改其子元素<div>元素的样式。一种解决方案是将类放在父元素<li>上。

在这种情况下，我建议使用 显示属性 list-item 而不是 block .

var ChangeLayout = function(rarity) {
  var listItemContainers = document.getElementsByClassName("itemContainer");
  var listItemContainersByRarity = document.getElementsByClassName(rarity);
  if (rarity == 'all') {
    for (var j = 0; j < listItemContainers.length; j++) {
      listItemContainers[j].style.display = 'list-item';
    }
  } else {
    for (var j = 0; j < listItemContainers.length; j++) {
      listItemContainers[j].style.display = 'none';
    }
    for (var h = 0; h < listItemContainersByRarity.length; h++) {
      listItemContainersByRarity[h].style.display = 'list-item';
    }
  }
}

#catalogGrid {
  display: grid;
  grid-auto-flow: row;
  grid-template-columns: repeat(3, 1fr);
  grid-column-gap: 5px;
  grid-row-gap: 5px;
}

<img id="gemStoneAll" src="https://picsum.photos/id/10/50/50" onclick="ChangeLayout('all')" />
<img id="gemStoneUncommon" src="https://picsum.photos/id/30/50/50" onclick="ChangeLayout('uncommon')" />
<img id="gemStoneRare" src="https://picsum.photos/id/40/50/50" onclick="ChangeLayout('rare')" />
<img id="gemStoneVeryRare" src="https://picsum.photos/id/50/50/50" onclick="ChangeLayout('veryrare')" />
<ul id=catalogGrid>
  <li class="itemContainer rare">
    <div>Rare</div>
  </li>
  <li class="itemContainer veryrare">
    <div>Very Rare</div>
  </li>
  <li class="itemContainer uncommon">
    <div>Uncommon</div>
  </li>
  <li class="itemContainer uncommon">
    <div>Uncommon</div>
  </li>
  <li class="itemContainer rare">
    <div>Rare</div>
  </li>
  <li class="itemContainer rare">
    <div>Rare</div>
  </li>
</ul>

编辑

这是一个带有一些小优化的版本：

var allItems = document.getElementsByClassName("item");
var btns = document.getElementsByClassName('btn');
function changeLayout(rarity) {
  var selectedItems = document.getElementsByClassName(rarity);
  // hide all
  Array.from(allItems).forEach((el) => {
    el.classList.add('hide');
  });
  // show selected
  Array.from(selectedItems).forEach((el) => {
    el.classList.remove('hide');
  });
}
// bind click handlers
Array.from(btns).forEach((el) => {
  el.addEventListener('click', function() {
    changeLayout(el.dataset.filter);
  });
});

#grid {
  display: grid;
  grid-auto-flow: row;
  grid-template-columns: repeat(3, 1fr);
  grid-column-gap: 5px;
  grid-row-gap: 5px;
}
.hide {
  display: none;
}

<img class="btn" data-filter="all" src="https://picsum.photos/id/10/50/50">
<img class="btn" data-filter="uncommon" src="https://picsum.photos/id/30/50/50">
<img class="btn" data-filter="rare" src="https://picsum.photos/id/40/50/50">
<img class="btn" data-filter="veryrare" src="https://picsum.photos/id/50/50/50">
<ul id=grid>
  <li class="item all rare">Rare</li>
  <li class="item all veryrare">Very Rare</li>
  <li class="item all uncommon">Uncommon</li>
  <li class="item all uncommon">Uncommon</li>
  <li class="item all rare">Rare</li>
  <li class="item all rare">Rare</li>
</ul>