Javascript.RU

Создать новую тему Ответ
 
Опции темы Искать в теме
  #1 (permalink)  
Старый 30.03.2019, 15:13
Аспирант
Отправить личное сообщение для Rezorwar Посмотреть профиль Найти все сообщения от Rezorwar
 
Регистрация: 25.06.2018
Сообщений: 33

jQuery: load и resize
Проблема в том что есть код, который показывает и скрывает карточки. И когда размер экрана становиться меньше 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();
    }
  }
Ответить с цитированием
  #2 (permalink)  
Старый 30.03.2019, 17:56
Аватар для Malleys
Профессор
Отправить личное сообщение для Malleys Посмотреть профиль Найти все сообщения от Malleys
 
Регистрация: 20.12.2009
Сообщений: 1,714

https://codepen.io/Malleys/pen/rbBRqj?editors=0010
Ответить с цитированием
  #3 (permalink)  
Старый 30.03.2019, 18:10
Аватар для рони
Профессор
Отправить личное сообщение для рони Посмотреть профиль Найти все сообщения от рони
 
Регистрация: 27.05.2010
Сообщений: 33,103

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

Последний раз редактировалось рони, 30.03.2019 в 18:12.
Ответить с цитированием
  #4 (permalink)  
Старый 30.03.2019, 18:54
Аватар для рони
Профессор
Отправить личное сообщение для рони Посмотреть профиль Найти все сообщения от рони
 
Регистрация: 27.05.2010
Сообщений: 33,103

скрыть блоки resize

как вариант ...
<!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>

Последний раз редактировалось рони, 30.03.2019 в 19:25. Причина: Show more
Ответить с цитированием
  #5 (permalink)  
Старый 30.03.2019, 19:18
Аспирант
Отправить личное сообщение для Rezorwar Посмотреть профиль Найти все сообщения от Rezorwar
 
Регистрация: 25.06.2018
Сообщений: 33

спасибо мужчины
Ответить с цитированием
Ответ



Опции темы Искать в теме
Искать в теме:

Расширенный поиск


Похожие темы
Тема Автор Раздел Ответов Последнее сообщение
Просмотрела исходик jQuery Откорректируйте где не верно taksebe jQuery 5 23.11.2018 22:42
(Jquery) on load динамически созданной картинки Quartz Events/DOM/Window 1 06.06.2016 10:12
jquery resize для div (а не только для window) Vitaliy88 Events/DOM/Window 102 12.08.2013 22:33
on вместо bind для ловли resize jquery? rockerror Библиотеки/Тулкиты/Фреймворки 2 05.11.2012 13:55
Проблема ajax с Jquery и load() chudoff.a jQuery 1 10.08.2011 00:22