代码之家 › 专栏 › 技术社区 › Charlie McShane

为li列表创建“prev/next”

wordpress css html jquery javascript

-1

Charlie McShane · 技术社区 · 7 年前

我正在创建一个li列表,该列表由一个php中继器生成,该中继器获取wordpress的博客文章并将标题放在一个完整的li列表中。

但是,我正在尝试对其进行编码,以便只显示前七个li,要查看下一个或前七个li,必须分别单击“prev”或“next”按钮。

这里是我所拥有的,我不知道关于jquery最好从哪里开始,什么是最好的方法?

ul > li {
  font-size: 25px;
  list-style: none;
  cursor: pointer;
  padding-left: 0;
  color: #000;
  
  -webkit-transition: all 0.35s ease;
  -moz-transition: all 0.35s ease;
  -o-transition: all 0.35s ease;
  transition: all 0.35s ease;
}

ul >li:hover {
  padding-left: 30px;
  color: green;
}

.wrapper {
  float: left;
}

.wrapper a {
  font-size: 20px;
  color: red;
  text-decoration: underline;
}

.wrapper .prev {
  float: left;
}

.wrapper .next {
  float: right;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js"></script>
<div class="wrapper">
  <ul>
    <li>Message 1</li>
    <li>Message 2</li>
    <li>Message 3</li>
    <li>Message 4</li>
    <li>Message 5</li>
    <li>Message 6</li>
    <li>Message 7</li>
    <li>Message 8</li>
    <li>Message 9</li>
    <li>Message 10</li>
    <li>Message 11</li>
  </ul>

  <a href="#" class="prev">prev</a>
  <a href="#" class="next">next</a>
</div>

4 回复 | 直到 7 年前

Krzysztof Janiszewski 7 年前

我希望这是你想要的。

current 变量用作指向 li 元素当前可见。所以每当你点击 .next 或 .prev 按钮此函数显示所有 锂 元素,然后隐藏超出范围的元素。

var current = 0;
var $li = $(".wrapper li");

$(".prev, .next").on('click', function() {
  if ($(this).hasClass("next")) {
    current+= 7;
    if (current >= $li.length) {
      current = current - 7;
    }
  } else {
    current-= 7;
    if (current < 0) {
      current = 0;
    }
  }
  hideLi();
});

hideLi();

function hideLi() {
  $li.show();
  $li.each(function(i, e) {
    if (i < current || i >= current+7) {
      $(e).hide();
    }
  });
}

ul>li {
  font-size: 25px;
  list-style: none;
  cursor: pointer;
  padding-left: 0;
  color: #000;
  -webkit-transition: all 0.35s ease;
  -moz-transition: all 0.35s ease;
  -o-transition: all 0.35s ease;
  transition: all 0.35s ease;
}

ul>li:hover {
  padding-left: 30px;
  color: green;
}

.wrapper {
  float: left;
}

.wrapper a {
  font-size: 20px;
  color: red;
  text-decoration: underline;
}

.wrapper .prev {
  float: left;
}

.wrapper .next {
  float: right;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js"></script>
<div class="wrapper">
  <ul>
    <li>Message 1</li>
    <li>Message 2</li>
    <li>Message 3</li>
    <li>Message 4</li>
    <li>Message 5</li>
    <li>Message 6</li>
    <li>Message 7</li>
    <li>Message 8</li>
    <li>Message 9</li>
    <li>Message 10</li>
    <li>Message 11</li>
    <li>Message 12</li>
    <li>Message 13</li>
    <li>Message 14</li>
    <li>Message 15</li>
    <li>Message 16</li>
    <li>Message 17</li>
    <li>Message 18</li>
    <li>Message 19</li>
  </ul>

  <a href="#" class="prev">prev</a>
  <a href="#" class="next">next</a>
</div>

Doug 7 年前

我偷偷地把我的大部分评论放在代码里… 但本着“从哪里开始”的精神:

创建一个函数来隐藏/显示列表项的部分
向该函数传递一个参数,该参数将帮助您确定要查看的页面
创建上一个和下一个函数以连接到链接
再加上几个健全性检查,以确保代码的执行不会超出其自身的范围(比如点击“下一步”,最后出现在不存在的第3页)

不过,这段代码不是jquery,而是它的传统(普通)javascript。

// set a global variable to track your "current page"
let currentPage = 1;
// set a global variable on how many LIs to show per page
let perPage     = 7;
// get the nodeList of all the LIs you wish to hide/show
// (paginate)
let liList      = document.getElementsByClassName('wrapper')[0].getElementsByTagName('li');
// find the total number of LIs available
let totalLis    = liList.length;
// find the number of pages...
// parseInt to strip away the decimals
// +1 because we're starting with 1
let totalPages  = parseInt( totalLis / perPage ) + 1;

// subtract from the global variable currentPage
// but don't let it go less than 1
function previous(){
  currentPage--;
  if( currentPage < 1 ){
    currentPage = 1;
  }
  page( currentPage );
}

// add to the global variable currentPage
// but don't let it exceed the totalPages count
function next(){
  currentPage++;
  if( currentPage > totalPages ){
    currentPage = totalPages;
  }
  page( currentPage );
}

function page( pageNum = 1 ){
  // Find the end range of pages you want to view
  let end   = pageNum * perPage;
  // Then subtract your perPage total to find the 
  // start value
  let start = end - perPage;
  // quicky sanity check to make sure you don't exceed
  // the available elements
  if( end > liList.length ){
    end = liList.length;
  }
  // hide ALL the list items
  for( let i=0, x=liList.length; i<x; i++ ){
    liList[i].style.display = 'none';
  }
  // but then show the ones within your chosen range
  for( let i=start, x=end; i<x; i++ ){
    liList[i].style.display = 'block';
  }
}

ul > li {
  font-size: 25px;
  list-style: none;
  cursor: pointer;
  padding-left: 0;
  color: #000;
}

ul > li:nth-child(n+8){
  display: none;
}

.wrapper {
  float: left;
}

.wrapper a {
  font-size: 20px;
  color: red;
  text-decoration: underline;
}

.wrapper .prev {
  float: left;
}

.wrapper .next {
  float: right;
}

<div class="wrapper">
  <ul>
    <li>Message 1</li>
    <li>Message 2</li>
    <li>Message 3</li>
    <li>Message 4</li>
    <li>Message 5</li>
    <li>Message 6</li>
    <li>Message 7</li>
    <li>Message 8</li>
    <li>Message 9</li>
    <li>Message 10</li>
    <li>Message 11</li>
  </ul>

  <a href="javascript: previous()" class="prev">prev</a>
  <a href="javascript: next()" class="next">next</a>
</div>

Ajith jojo 7 年前

它叫做分页,请使用数据表 https://datatables.net/ 检查这个网站的Java脚本,试试这个,或者你可以找到很多替代品。

否则您需要为此创建php分页脚本

AA Shakil 7 年前

jquery.slice()

将匹配元素集减少到由一系列索引指定的子集。

结构: jQuery.slice(from, to)

基于0。因此,jquery.slice(7,10)将选择8、9、10和11号元素。 Here's the documentation

一开始你得躲起来 li 8~11。

$("ul li").slice(7,10).hide()

将单击侦听器添加到 .next 隐藏前7个 锂 具有 slice .

$(".next").click(function(){
 $('ul li').slice(0, 6).hide();
}

将单击侦听器添加到 .prev 再次显示前7并隐藏8-11。

$(".prev").click(function(){
 $("ul li").slice(0, 6).show();
 $("ul li").slice(7, 10).hide();
}