Форум

Rezorwar · #1 (**permalink**) 30.03.2019, 15:13

Проблема в том что есть код, который показывает и скрывает карточки. И когда размер экрана становиться меньше 320 то часть карточек нужно прятать, код работает но когда обратно увеличить размер не перезагружая страницу то видимое количество карточек не увеличивается, помогите пж.

if ($('.main-card__cards').length > 3) {
      $(window).on('load resize',windowSize);
      $('.cards-user__button').show();
    }
    
  $('.cards-user__button').on('click', function() {      
    $('.main-card__cards:gt(5)').toggle();
    $(this).text() === 'Show less' ? $(this).text('Show more') : $(this).text('Show less');
  });

  function windowSize(){
    if ($(window).width() <= '320'){
      $('.main-card__cards:gt(2)').hide();
    } else {
      $('.main-card__cards:gt(5)').hide();
    }
  }

Malleys · #2 (**permalink**) 30.03.2019, 17:56

https://codepen.io/Malleys/pen/rbBRqj?editors=0010

рони · #3 (**permalink**) 30.03.2019, 18:10

Malleys,
что-то не так ... если идёт скрытие больше трёх, то потом как открыть 4 и 5 и 6 блоки?

рони · #4 (**permalink**) 30.03.2019, 18:54

как вариант ...

<!DOCTYPE HTML>

<html>

<head>
  <title>Untitled</title>
  <meta charset="utf-8">
<style class="cp-pen-styles">.main-card__cards {
	width: 200px;
	height: 100px;
	background: purple;
	margin: .1em;
	display: inline-flex;
	color: white;
	align-items: center;
	justify-content: center;
	font: bold 500% monospace;
}

button {
	display: flow-root;
	margin: auto;
}</style></head><body>

<div class="main-card__cards">1</div>
<div class="main-card__cards">2</div>
<div class="main-card__cards">3</div>
<div class="main-card__cards">4</div>
<div class="main-card__cards">5</div>
<div class="main-card__cards">6</div>
<div class="main-card__cards">7</div>
<div class="main-card__cards">8</div>
<div class="main-card__cards">9</div>
<div class="main-card__cards">10</div>
<button class="cards-user__button">Show more</button>
<script src='https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js'></script>
<script >
if ($(".main-card__cards").length > 3) {
  $(window).on("load resize", windowSize);
  $(".cards-user__button").show();
}
var num = 5;
$(".cards-user__button").on("click", function () {
  $(".main-card__cards:gt("+num+")").toggle();
  $(this).text() === "Show less" ?
  $(this).text("Show more") :
  $(this).text("Show less");
});

function windowSize() {
  num =  ($(window).width() / 320|0) || 1;
  $(".main-card__cards").show();
  $(".main-card__cards:gt("+num+")").hide();
  $(".cards-user__button").text("Show more")
 }
        </script>
</body>
</html>

Rezorwar · #5 (**permalink**) 30.03.2019, 19:18

спасибо мужчины

Форум

Справочник

Discord чат

Курсы javascript