изменить CSS с JS на основе четного или нечетного числа класса - PullRequest
Новая
       13

изменить CSS с JS на основе четного или нечетного числа класса

0 голосов
/ 09 апреля 2019

Я изучаю CSS-сетки и JavaScript.Интересно, возможно ли изменить минимальное значение grid-template-columns элемента: last-of-type, основываясь на том, есть ли четное или нечетное число элементов div с этим классом.Я клонировал пример компоновки сетки от Хуана Мартина Гарсии в статье css-tricks.Это HTML: 

<section class="breweries" id="breweries">
    <ul id="cardContainer">
      <li class="card">
        <figure>
          <img src="https://images.unsplash.com/photo-1489993360877-883980cc7333?ixlib=rb-1.2.1&ixid=eyJhcHBfaWQiOjEyMDd9&auto=format&fit=crop&w=1350&q=80" alt="Several hands holding beer glasses">
          <figcaption><h3>Billions upon billions</h3></figcaption>
        </figure>
        <p>
          Made in the interiors of collapsing stars star stuff harvesting star light venture billions upon billions Drake Equation brain is the seed of intelligence?
        </p>
        <a href="#">Visit Website</a>
      </li>
      <li class="card">
        <figure>
          <img src="https://images.unsplash.com/photo-1455620611406-966ca6889d80?ixlib=rb-1.2.1&ixid=eyJhcHBfaWQiOjEyMDd9&auto=format&fit=crop&w=1430&q=80" alt="Several friends doing a toast">
          <figcaption><h3>Drake Equation</h3></figcaption>
        </figure>
        <p>
          Another world citizens of distant epochs from which we spring descended from astronomers Orion's sword shores of the cosmic ocean.
        </p>
        <a href="#">Visit Website</a>
      </li>
      <li class="card">
        <figure>
          <img src="https://images.unsplash.com/photo-1460627390041-532a28402358?ixlib=rb-1.2.1&auto=format&fit=crop&w=1350&q=80" alt="Three different glasses of beer">
          <figcaption><h3>Vast cosmic arena</h3></figcaption>
        </figure>
        <p>
          Galaxies the ash of stellar alchemy prime number science inconspicuous motes of rock and gas brain is the seed of intelligence.
        </p>
        <a href="#">Visit Website</a>
      </li>
    </ul>
  </section>

Это CSS: 

/* breweries styles */
.breweries {
  padding: 2rem;
}

.breweries > ul {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(320px, 1fr));
  grid-gap: 1rem;
}

.breweries > ul > li {
  border: 1px solid #E2E2E2;
  border-radius: .5rem;
}

.breweries > ul > li > figure {
  max-height: 220px;
  overflow: hidden;
  border-top-left-radius: .5rem;
  border-top-right-radius: .5rem;
  position: relative;
}

.breweries > ul > li > figure > img {
  width: 100%;
}

.breweries > ul > li > figure > figcaption {
  position: absolute;
  bottom: 0;
  background-color: rgba(0,0,0,.7);
  width: 100%;
}

.breweries > ul > li > figure > figcaption > h3 {
  color: white;
  padding: .75rem;
  font-size: 1.25rem;
}

.breweries > ul > li > p {
  font-size: 1rem;
  line-height: 1.5;
  padding: 1rem .75rem;
  color: #666666;
}

.breweries > ul > li > a {
  padding: .5rem 1rem;
  margin: .5rem;
}

С правилом grid-template-columns: repeat(auto-fit, minmax(320px, 1fr)); Для .cardContainer, если ширина экрана уменьшается до 1055px, последний изэлемент .card li шириной 350px будет иметь 350px слева от конечного пробела слева от него.

Я хотел бы с javascript сначала проверить, есть ли нечетное или четное количество элементов .card, иесли существует нечетное количество элементов .card, измените ширину последнего элемента .card с помощью: last-of-type и установите ее так, чтобы она занимала все доступное пространство, оставшееся в элементе ul .cardContainer.

Это мой javascript: 

let parent = document.getElementById("cardContainer");
let nodesSameClass = parent.getElementsByClassName("card");
console.log(nodesSameClass.length);

function isEven(card) {
    if (card%2 == 0)
        return true;
    else
        return false;
}

Так вот, как далеко я смог это сделать.Я хотел бы понять, как я могу изменить оператор else, если он возвращает false и существует нечетное количество элементов .card li.Таким образом, я могу заполнить оставшееся пространство, и последний элемент .card заполняет все доступное пространство в элементе ul .cardContainer.

Спасибо:)

...