我目前正致力于使用div
和链接创建简单的动态内联分页。我已经被困在这段代码上几个小时了,试图找出如何创建分页链接,具体取决于当前有多少.thumbnailPage
div。
我希望能够在.newsflash
div下方插入一个div,其中包含显示.thumbnailPage
div的链接。
JavaScript的:
/*----- Wraps .bite divs in separate, numbered .thumbnailPage divs -----*/
var addnumber = 0;
$('#newsflash .bite').each(function(i) {
if( i % 6 == 0 ) {
$(this).nextAll()
.andSelf()
.slice(0,6)
.wrapAll('<div id="thumbnailPage'+ (++addnumber) +'content"></div>');
}
});
/*----- Hides .thumbnailPage divs -----*/
$('#newsflash').children().hide();
/*----- Hopefully a code to insert pagination links here, depending on number of .thumbnailPages -----*/
/*----- Function for .thumbnailPage links -----*/
$('#pagewrapper a').click(function () {
var chosen1 = this.id;
var divIdToShow = chosen1 + 'content';
$('#newsflash').children('div').each(function (i) {
var currentDiv = $(this);
if (this.id == divIdToShow) {
if (currentDiv.not(':visible')) {
currentDiv.show();
}
} else {
currentDiv.hide();
}
});
});
HTML
<div class="newsflash" id="newsflash">
<div id="thumbnailPage1content">...</div>
<div id="thumbnailPage2content">...</div>
<div id="thumbnailPage3content">...</div>
<!--- Hopefully insert this pagewrapper div here depending on how many thumbnailPages --->
<div id="pagewrapper">
<a id="thumbnailPage1">1</a>
<a id="thumbnailPage2">2</a>
<a id="thumbnailPage3">3</a>
</div>
</div>