[ Поиск ] - [ Пользователи ] - [ Календарь ]
Полная Версия: Кнопка еще
Xander
Доброго времени суток имею вот такую структуру

<div class='content'>
<div
class='block'>1</div>
<div
class='block'>2</div>
<div
class='block'>3</div>
<div
class='block'>4</div>
<div
class='block'>5</div>
<div
class='block'>6</div>
<div
class='block'>7</div>
<div
class='block'>8</div>
<div
class='block'>9</div>
<div
class='block'>10</div>
<div
class='block'>11</div>
</div>
<a
href='' id='button'>показать еще</a>


первые 4 блока отображаются а все остальные через css скрыты, каким образом при нажатии на кнопку показать еще показывать остальные скрытые блоки по 4 штуки за раз и после того как все блоки будут отображены то кнопка показать еще пропадет? Заранее премного благодарен
Kusss
$("#button").on('click', function(){
var $_hide = $( ".block:hidden" );
$_hide.first().show();
if ($( ".block:hidden" ).length == 0)
$(this).hide();
});

P.S. Ой это показывать по одному
Xander
спасибо , сейчас пробую вот
Kusss
$("#button").on('click', function(){
var $_hide = $(".block:hidden"),
i = 1;

$_hide.each(function (){
if (i <= 4)
$(this).show();
i++;
});

if ($_hide.length <= 4)
$("#button").hide();

});
Xander
Благодарю, все идеально прямо как мне надо было!
sergeiss
Xander, а какой смысл скрывать-показывать блоки? Обычно "Ещё" связано с определенной функциональностью, с подгрузкой данных с сервера. То есть изначально их просто нет в браузере. Нажал ЕЩЁ - ушел запрос, данные пришли, формируешь новые блоки для показа данных. И так до тех пор, пока юзер жмякает ЕЩЁ или пока не закончатся данные.

_____________
* Хэлп по PHP
* Описалово по JavaScript
* Хэлп и СУБД для PostgreSQL

* Обучаю PHP, JS, вёрстке. Интерактивно и качественно. За разумные деньги.

* "накапливаю умение телепатии" (С) и "гуглю за ваш счет" (С)

user posted image
RootPM
Как уже написал sergeiss, более правильно не скрывать блоки, а добавлять новые, до установленного предела.

_____________
Все будет офигенно. Кому-то сразу, кому-то постепенно.
walerus
sergeiss, RootPM
Чего накинулись на парня, у него быстрый интернет и много оперативной памяти cool.gif
sergeiss
walerus, а потом он придет и будет спрашивать, как ему динамически добавить 12-й ДИВ smile.gif

_____________
* Хэлп по PHP
* Описалово по JavaScript
* Хэлп и СУБД для PostgreSQL

* Обучаю PHP, JS, вёрстке. Интерактивно и качественно. За разумные деньги.

* "накапливаю умение телепатии" (С) и "гуглю за ваш счет" (С)

user posted image
Быстрый ответ:

 Графические смайлики |  Показывать подпись
Здесь расположена полная версия этой страницы.
Invision Power Board © 2001-2024 Invision Power Services, Inc.