这里的关键不仅在于泛化您的JS,而且还泛化您的HTML。您还必须将currentPageA和totalPageA变量更改为array,以便它们可以容纳多个值。
观看我的演示: http :
//jsfiddle.net/Jaybles/b2uRd/
的HTML
<!-- Page A --><div> <span>Page A</span> <input id="page_a_next" name="page_a_next" type="button" value="Next" data-inline="true"/> <input id="page_a_prev" name="page_a_prev" type="button" value="Previous" data-inline="true" /> </div> <div id="display_page_a_page" name="display_page_a_page"></div><div id="display_page_a_number" name="display_page_a_number"></div><!-- Page B --><div> <span>Page B</span> <input id="page_b_next" name="page_b_next" type="button" value="Next" data-inline="true" /> <input id="page_b_prev" name="page_b_prev" type="button" value="Previous" data-inline="true" /> </div> <div id="display_page_b_page" name="display_page_b_page"></div><div id="display_page_b_number" name="display_page_b_number"></div>
JS
var currentPage = {'a':1, 'b':1}; //Should go from A to Zvar totalPage = {'a':113, 'b':115}; //Should go from A to Z$(".pageButton").click(function(){ var a = $(this).attr('name').split("_"); var page = a[1]; var dir = a[2]; currentPage[page] = (dir=='next') ? currentPage[page] + 1 : currentPage[page] - 1; if(currentPage[page]<=0) { currentPage[page]=1; $('#page_' + page + '_prev').attr('disabled','disabled'); } else if(currentPage[page] > totalPage[page]) { currentPage[page]=totalPage[page]; $('#page_' + page + '_next').attr('disabled','disabled'); } else { loadPage(page); } });loadPage('a');function loadPage(page){ $('#page_' + page + '_next').attr('disabled','disabled'); $('#page_' + page + '_prev').attr('disabled','disabled'); $.ajax({ url: 'page_' + page + '.php?page='+currentPage[page], type: 'POST', error : function (){ document.title='error'; }, success: function (data) { $('#display_page_' + page + '_number').html(currentPage[page]+ ' of ' + totalPage[page]); $('#display_page_' + page + '_page').html(data); $('#page_' + page + '_next').attr('disabled',''); $('#page_' + page + '_prev').attr('disabled',''); } });}


