Как сделать кнопку показать еще на javascript?

Пользователь

от sylvester , в категории: JavaScript , год назад

Как сделать кнопку показать еще на javascript?

Facebook Vk Ok Twitter LinkedIn Telegram Whatsapp

2 ответа

Пользователь

от loyal , год назад

@sylvester 

Пример кода для создания кнопки "Показать еще" на JavaScript:


HTML:

 1
 2
 3
 4
 5
 6
 7
 8
 9
10
<div id="list">
  <!-- Список элементов для отображения -->
  <div class="item">Элемент 1</div>
  <div class="item">Элемент 2</div>
  <div class="item">Элемент 3</div>
  <div class="item">Элемент 4</div>
  <div class="item">Элемент 5</div>
</div>

<button id="show-more">Показать еще</button>


JavaScript:

 1
 2
 3
 4
 5
 6
 7
 8
 9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
var button = document.getElementById("show-more");
var list = document.getElementById("list");
var items = list.getElementsByClassName("item");
var visibleItemCount = 2; // количество элементов, которые отображаются изначально
var hiddenItemCount = items.length - visibleItemCount; // количество скрытых элементов

// Скрыть все элементы, кроме первых visibleItemCount
for (var i = visibleItemCount; i < items.length; i++) {
  items[i].style.display = "none";
}

button.onclick = function() {
  // Отобразить следующие hiddenItemCount элементов
  for (var i = visibleItemCount; i < visibleItemCount + hiddenItemCount; i++) {
    if (items[i]) {
      items[i].style.display = "block";
    }
  }

  // Если все элементы отображены, скрыть кнопку
  if (visibleItemCount + hiddenItemCount >= items.length) {
    button.style.display = "none";
  }

  visibleItemCount += hiddenItemCount;
};


CSS:

1
2
3
.item {
  margin-bottom: 10px;
}


Этот код создает кнопку "Показать еще", которая отображает скрытые элементы списка при каждом клике, пока не будут показаны все элементы. Кнопка скрывается, когда все элементы отображены. Количество отображаемых элементов изначально можно настроить, изменяя значение переменной visibleItemCount в коде JavaScript.

Пользователь

от brooklyn , 3 месяца назад

@sylvester 

Отличный пример! Этот код позволяет показывать скрытые элементы при каждом нажатии на кнопку "Показать еще" и скрывать кнопку, когда все элементы отображены.


Для более гибкого контроля над количеством элементов, которые будут отображаться при каждом нажатии на кнопку, можно также добавить поле ввода (input) для задания этого значения пользователем. Здесь приведен код, который позволяет пользователю указывать количество элементов для отображения:


HTML:

 1
 2
 3
 4
 5
 6
 7
 8
 9
10
11
<div id="list">
  <!-- Список элементов для отображения -->
  <div class="item">Элемент 1</div>
  <div class="item">Элемент 2</div>
  <div class="item">Элемент 3</div>
  <div class="item">Элемент 4</div>
  <div class="item">Элемент 5</div>
</div>

<input type="number" id="item-count" value="2">
<button id="show-more">Показать еще</button>


JavaScript:

 1
 2
 3
 4
 5
 6
 7
 8
 9
10
11
12
13
14
15
16
17
18
var button = document.getElementById("show-more");
var list = document.getElementById("list");
var items = list.getElementsByClassName("item");

button.onclick = function() {
  var count = parseInt(document.getElementById("item-count").value);
  var hiddenElements = Array.prototype.filter.call(items, function(item) {
    return item.style.display === 'none';
  });

  for (var i = 0; i < count; i++) {
    if (hiddenElements[i]) {
      hiddenElements[i].style.display = "block";
    } else {
      button.style.display = "none";
    }
  }
};


CSS:

1
2
3
4
.item {
  margin-bottom: 10px;
  display: none;
}


Этот код позволяет пользователю указывать количество элементов для отображения с помощью input. Кнопка "Показать еще" будет отображать указанное количество скрытых элементов при каждом нажатии.