Question

嗯......我正在尝试但不确定如何“完成”它。我使用<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's）”

我添加了这样的“链接”:(实际上包含在上面的代码中，但移动到这里给出某种形式的“时间轴”

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>

但是..如果我使用（警报只是为了测试获得上一个id）

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

或

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

我总是得到“第一个”id，即id =“page_1”我需要“找到”id为“可见”id - 即page_“x”。

任何想法 - 希望它是“明确的”

Answer 1

我不确定我是否关注过您，但如果您在容器中的一组div中寻找可见的div，则可以使用：visible selector。即：

$('.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
});

Answer 2

我会使用切换类机制，当你创建/显示一个div时，你会添加一个像“visible-div”这样的类，当你隐藏一个div时你会删除它。通过这种方式，应该很容易知道哪个是可见的，哪个不是。（只需将.visible-div附加到选择器）

由于您在同一个地方进行隐藏/显示，因此也很容易保持事物的一致性。

Jquery动态分页与附加div

2 个答案: