Блог

Мой сайт позволяет пользователям загружать массовые изображения. Проблема в том, что когда пользователь находится на мобильном телефоне, ему потенциально может потребоваться прокрутить 100 изображений. Я хочу реализовать кнопку «Показать больше».

Я нашел в Интернете эту демо-версию, с которой приступил к работе

HTML:

 lt;div class="container"gt;  lt;div class="grid"gt;  lt;div class="cell"gt;  lt;img src="https://i.natgeofe.com/n/3861de2a-04e6-45fd-aec8-02e7809f9d4e/02-cat-training-NationalGeographic_1484324.jpg" class="book" /gt;  lt;/divgt;  lt;div class="cell"gt;  lt;img src="https://i.natgeofe.com/n/3861de2a-04e6-45fd-aec8-02e7809f9d4e/02-cat-training-NationalGeographic_1484324.jpg" class="book" /gt;  lt;/divgt;  lt;/divgt;  lt;/divgt;     lt;button onclick={showMore()}gt;Show all bookslt;/buttongt;    lt;scriptgt;  const showMore = () =gt; {  document.querySelectorAll('.cell').forEach(c =gt; c.style.display = 'block')  }  lt;/scriptgt;  

CSS:

 @media screen and (min-width: 600px) { .container{  overflow: auto;  height: (70vh); } .grid {  display: flex;  flex-wrap: wrap;  flex-direction: row; } .cell {  width: calc(50% - 2rem); } }   .cell { margin: 1rem; }  button { display: none; }  @media screen and (max-width: 600px) { .cell {  display: none; }  .cell:first-child {  display: block; }  button {  display: inline-block; } }  

Однако, когда я использую один и тот же код только с циклом for для отображения, он не работает и просто отображает все изображения.

 lt;div class="container"gt;  lt;div class="grid"gt;  {% for images in postgallery %}   lt;div class="cell"gt;  lt;img src="{{ images.images.url }}" class="book" /gt;  lt;/divgt;   {% endfor %}  lt;/divgt; lt;/divgt; lt;button onclick="{showMore()}"gt;Show all bookslt;/buttongt;  lt;scriptgt;  const showMore = () =gt; {  document.querySelectorAll(".cell").forEach((c) =gt; (c.style.display = "block"));  }; lt;/scriptgt;