Скрыть элементы сетки с помощью JavaScript - PullRequest
Новая
       24

Скрыть элементы сетки с помощью JavaScript

1 голос
/ 31 мая 2019

У меня есть 2 х 2 CSS-сетки.Каждый элемент сетки кратко описывает услугу (веб-сайт малого бизнеса), и у каждого элемента сетки есть кнопка, чтобы узнать больше об этой услуге.Когда пользователь нажимает одну из четырех кнопок, чтобы узнать больше, я бы хотел, чтобы этот элемент сетки расширился и занял всю сетку 2x2 (это у меня работает), а другие 3 элемента сетки исчезли (с этим у меня возникли проблемы)).Вот пример: https://jsfiddle.net/L7fatdmh/, обратите внимание, что только первый элемент сетки имеет JS, примененный к нему в данный момент.

html: 

 <div class="grid-squares">
            <div class="grid_item" id="g1">
              <h2>Service One</h2>
              <p>
                lorem impsum
              </p>
              <button id="firstButton">Learn More</button>
            </div>
            <div class="grid_item">
              <h2>Service Two</h2>
               <p>
                lorem impsum
              </p>
              <button>Learn More</button>              
            </div>
            <div class="grid_item">
              <h2>Service Three</h2>
              <p>
                lorem impsum
              </p> 
              <button>Learn More</button>             
            </div>
            <div class="grid_item">
              <h2>Service Four</h2>
               <p>
                lorem impsum
              </p> 
               <button>Learn More</button>         
            </div>
          </div>

css: 

.grid-squares{
  display: grid;
  grid-template-columns: 1fr 1fr; 
  grid-auto-rows: 300px;
}

js: 

firstButton = document.getElementById("firstButton");
firstButton.onclick = function(){
  squaresGrid = document.getElementsByClassName("grid-squares");
  g1 = document.getElementById("g1");
  console.log(g1)
  g1.style.gridColumn = "1/3";
  g1.style.gridRow = "1/3";
}

Как вы можете видеть в примере jsFiddle, сеткаЭлемент расширяется, чтобы заполнить надлежащее пространство, но все остальные элементы сетки все еще видны внизу.Как я могу скрыть это?Первоначально скрывает все grid-item с, а затем отображает определенный элемент на основе его id (т.е. g1 в первом элементе сетки) лучший вариант?

1 Ответ

0 голосов
/ 31 мая 2019

Вы можете выбрать элементы, которые не являются целью вашего события, и скрыть их.

Используя вашу скрипку, если мы добавим 

gOther = document.querySelectorAll(".grid_item:not(#g1)");

for (g of gOther) {
 g.style.display = "none";
}

Это бы сработало, но для сценария реального мира вам нужно сделать его немного более полным и найти элементы, которые не являются вашей целью.

...