Удалить пробелы скрытых элементов в сетке - PullRequest
Новая
       30

Удалить пробелы скрытых элементов в сетке

0 голосов
/ 08 июня 2019

Я работаю над каталогом для веб-сайта, который использует сетку для отображения различных покупаемых предметов. Теперь у меня есть функция, которая будет скрывать определенные элементы в сетке, щелкая изображение. Но при нажатии элементы, которые все еще видны, остаются в исходном положении в сетке. Так что, если у меня есть 6 элементов, распределенных по 2 строкам и 3 столбцам, как таковые: 

1 2 3
4 5 6

, а затем выполните функцию, скажем, скрыть числа, делимые на 2, сетка выглядит следующим образом 

1   3
  5

Есть ли способ сделать сетку похожей на эту? 

1 3 5

Я использую display = 'none', чтобы скрыть элементы.

Вот упрощенная версия кода: 

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

1 Ответ

1 голос
/ 09 июня 2019

Элементы <li> не отображаются / не скрываются, поскольку вы меняете стили их дочерних элементов <div>.Одно из решений - вместо этого поместить классы в родительские элементы <li>.

В этом случае я предлагаю использовать свойство display list-item вместо block. * 1010.* 

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