Question

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

 John Beatrice
 John Lucio
 Beatrice Lucio
 John Johna
 Beatrice Johna
 Lucio Johna
 John Beatricea
 Beatrice Beatricea
 Lucio Beatricea
 Johna Beatricea
 John Lucioa
 Beatrice Lucioa
 Lucio Lucioa
 Johna Lucioa
 Beatricea Lucioa

然后执行该功能，以说隐藏数字可被2整除的网格看起来像这样

1 2 3
4 5 6

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

1   3
  5

我正在使用display ='none'隐藏项目。

这是代码的简化版本：

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

View on 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>

删除网格上隐藏项目的空白

1 个答案:

编辑