JQuery динамическая нумерация страниц с добавлением div - PullRequest
Новая
       18

JQuery динамическая нумерация страниц с добавлением div

0 голосов
/ 06 января 2011

Ммм ... Я пытаюсь что-то, но не знаю, как "закончить" это.Я добавляю <div> в форму, используя append(), этот бит не проблема.Я пытаюсь «создать» каждый div как «новую страницу», поэтому при добавлении div я скрываю предыдущий div.пример: 

<form class="paginatedform" >
<div id="page_1" class="paginatedformpage clearfix">Content in here </div>
</form>

Затем я «добавляю новую страницу», например: 

$('#addpage').click(function(){
var newid = $('.paginatedform').length;
var nextid = newid+1;
var previd = newid;
$('#page_'+previd+'').hide();
$('.paginatedform').append('<div id="page_'+nextid+'" class="paginatedformpage clearfix">Content in here </div>');      
});

Этот лот «работает». ОК, возможно, не самый «лучший / самый красивый», но это так.работа.

Что я хочу / нужно сделать, это добавить ссылку «назад / далее», чтобы вы могли «перемещаться между страницами (div)»

Я добавляю «ссылки» следующим образом: (на самом деле содержится в приведенном выше коде, но перенесено для придания здесь некоторой формы «временной шкалы» 

if(newid ==1 ) { $('#pagepagination').append('<a href="#" class="pgbk">back</a>'); }
if(newid ==2 ) { $('#pagepagination').append('<a href="#" class="pgnxt">next</a>'); }

«общий» html выглядит следующим образом: 

<form class="paginatedform" >
<div id="page_1" class="paginatedformpage clearfix">Content in here </div>
<div id="pagepagination"></div>
</form>

НО .. еслиЯ использую (оповещение только для проверки получения предыдущего идентификатора) 

$('.pgbk').live('click',function(){
alert($('#pollpagination').prev('div').attr('id')); 
});

или 

$('.pgnxt').live('click',function(){
alert($('#pollpagination').prev('div').attr('id')); 
});

Я всегда получаю "первый" идентификатор, т.е. id = "page_1", что мне нужно "найти "id" видимый "id - то есть page_" x ".

Любые идеи - надеюсь, это" ясно "

Ответы [ 2 ]

0 голосов
/ 06 января 2011

Я бы использовал механизм переключения классов: когда вы создаете / показываете div, вы добавляете к нему класс вроде «visible-div», а когда вы скрываете div, вы удаляете его.Таким образом, должно быть легко узнать, что является видимым, а что нет.(просто добавьте .visible-div к селектору)

Поскольку вы делаете скрытие / отображение в одном и том же месте, это также будет легко поддерживать согласованность.

0 голосов
/ 06 января 2011

Я не уверен, что следую за вами, но если вы ищете видимый div среди набора div в контейнере, вы можете использовать: visible selector. i.e.:

$('.pgbk').live('click',function(){ 
  alert($('#pollpagination').prev('div:visible').attr('id'));  
}); 


$('.pgnxt').live('click',function(){ 
  alert($('#pollpagination').next('div:visible').attr('id'));  //Changed prev to next
});
...