Question

我试图为我的<li>链接制作一个简单的（仅限下一个按钮）javascript分页

＆＃13;

var current_page = 1;
var records_per_page = 5;

function prevPage()
{
  if (current_page > 1) {
    current_page--;
    changePage(current_page);
  }
}

function nextPage()
{
  if (current_page < numPages()) {
    current_page++;
    changePage(current_page);
  }
}

function changePage(page)
{
  var btn_next = document.getElementById("btn_next");
  var btn_prev = document.getElementById("btn_prev");
  var items = document.querySelectorAll('#Mylinks li');
  // Validate page
  if (page < 1) page = 1;
  if (page > numPages()) page = numPages();

  for (var i = (page-1) * records_per_page; i < (page * records_per_page) && i < items.length; i++) {
    items[i].style.display = "block";
  }

  if (page == 1) {
    btn_prev.style.visibility = "hidden";
  } else {
    btn_prev.style.visibility = "visible";
  }
  if (page == numPages()) {
    btn_next.style.visibility = "hidden";
  } else {
    btn_next.style.visibility = "visible";
  }
}
function numPages()
{
  return Math.ceil(items.length / records_per_page);
}
window.onload = function() {
  changePage(1);
};

＆＃13;

<div class="panel-body">
    	<div id="listingTable">
    		<ul id = "Mylinks" class="paging">
    			<li style="display: none;"><a href="http://site1.com" rel="nofollow">Description1</a></li>
    			<li style="display: none;"><a href="http://site2.com" rel="nofollow">Description2</a></li>
    			<li style="display: none;"><a href="http://site3.com" rel="nofollow">Description3</a></li>
    			<li style="display: none;"><a href="http://site4.com" rel="nofollow">Description4</a></li>
    			<li style="display: none;"><a href="http://site5.com" rel="nofollow">Description5</a></li>
    			<li style="display: none;"><a href="http://site6.com" rel="nofollow">Description6</a></li>
    			<li style="display: none;"><a href="http://site7.com" rel="nofollow">Description7</a></li>
    			<li style="display: none;"><a href="http://site100.com" rel="nofollow">Description100</a></li>
    			//Number of links is unlimited.
    		</ul>
    	</div>
    	<ul class="pager">
    	  <li><a href="javascript:prevPage()" id="btn_prev">previous</a></li>
    	  <li><a href="javascript:nextPage()" id="btn_next">next</a></li>
    	</ul>
    </div>

＆＃13;

我不想使用jquery。我的代码几乎正常工作。

我需要将第{1}页更改为"display: none;"，然后在用户转到下一页时将第1页更改为"display: block;" ...

Answer 1

两个问题：

您只在insert into theme values('Sport');中定义了items，但您在其他地方使用过它。我将声明移到了全球范围。
您设置了changePage应该可见的元素，但未能设置display:block不可见的元素。我更改了display:none中的for循环以执行这两项操作。

以下代码按预期工作：

＆＃13;

changePage

＆＃13;

var current_page = 1;
var records_per_page = 5;
var items = document.querySelectorAll("#Mylinks li");

function prevPage()
{
  if (current_page > 1) {
    current_page--;
    changePage(current_page);
  }
}

function nextPage()
{
  if (current_page < numPages()) {
    current_page++;
    changePage(current_page);
  }
}

function changePage(page)
{
  var btn_next = document.getElementById("btn_next");
  var btn_prev = document.getElementById("btn_prev");
  // Validate page
  if (page < 1) page = 1;
  if (page > numPages()) page = numPages();

  for (var i = 0; i < items.length; i++) {
    if (i >= (page-1) * records_per_page &&
        i < page * records_per_page) {
      items[i].style.display = "block";
    } else {
      items[i].style.display = "none";
    }
  }

  if (page == 1) {
    btn_prev.style.visibility = "hidden";
  } else {
    btn_prev.style.visibility = "visible";
  }
  if (page == numPages()) {
    btn_next.style.visibility = "hidden";
  } else {
    btn_next.style.visibility = "visible";
  }
}
function numPages()
{
  return Math.ceil(items.length / records_per_page);
}
window.onload = function() {
  changePage(1);
};

＆＃13;

Answer 2

我猜smarx的答案是正确的，但无论如何我都会发布这个答案。

https://jsfiddle.net/rnLbo80q/2/

var current_page = 1;
var records_per_page = 5;
var items = document.querySelectorAll("#MypLinkbox li");

function prevPage() {
    if (current_page > 1) {
        current_page--;
        changePage(current_page);
    }
}

function nextPage() {
    if (current_page < numPages()) {
        current_page++; 
        changePage(current_page);
    }
}

function changePage(page) {
    var btn_next = document.getElementById("btn_next");
    var btn_prev = document.getElementById("btn_prev");

    // Validate page
    if (page < 1) page = 1;
    if (page > numPages()) page = numPages();

    // hide all
    for (var i = 0; i < items.length; i++){
       items[i].style.display = "none";
    }

    for (var i = (page-1) * records_per_page; i < (page * records_per_page) && i < items.length; i++) {
       items[i].style.display = "block";
    }

    if (page == 1) 
        btn_prev.style.visibility = "hidden";
    else 
        btn_prev.style.visibility = "visible";

    if (page == numPages())
        btn_next.style.visibility = "hidden";
    else 
        btn_next.style.visibility = "visible";

}

function numPages() {
    return Math.ceil(items.length / records_per_page);
}

window.onload = function() {
    changePage(1);
};

javascript分页链接

2 个答案: