jquery页面计数器，分页答案

【问题标题】：jquery page counter, paginationjquery页面计数器，分页
【发布时间】：2018-05-29 08:42:45
【问题描述】：

我对下一个代码有问题

在上一张图片中，您可以看到一个 scorm，左侧是页面列表，中间是一个计数器。

$(document).ready(function(){
 $(".ViewerPagination__fullpage").html($("li.liItem").size()); 
 $(".ViewerPagination__page").text(1);
 
 	$("li.liItem").on( "click", function(){
		var numpag = $("li.liItem").index(this);
		$(".ViewerPagination__page").text(numpag+1);
		 $('a.nav_delante').on( "click", function(){
            var summa = ++numpag;         
         $(".ViewerPagination__page").text(summa+1);  
         if (summa === $("li.liItem").length) {
			 $(".ViewerPagination__page").html($("li.liItem").size());
       $('a.nav_delante').off();
		 }
     });
     $('a.nav_atras').on( "click", function(){
            var rest = --numpag; 
         $(".ViewerPagination__page").text(rest-1);
       if (rest === 1) {
			 $(".ViewerPagination__page").text(1);
       $('a.nav_atras').off();
		 }
     });
	});
	

	

});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>

<!--this is the html code that I use for the list:-->

<ul class="uItem">
<li title="text1" class="liItem ">
 <div class="divItem notattempted selected" data-pag="001">
  <span class="spanItem">
  <a class="aItem">text1</a>
  </span>
 </div>
</li>
<li title="text2" class="liItem ">
 <div class="divItem notattempted" data-pag="002">
   <span class="spanItem">
   <a class="aItem">text2</a>
   </span>
 </div>
</li>
<li title="text3" class="liItem ">
 <div class="divItem notattempted" data-pag="003">
   <span class="spanItem">
   <a class="aItem">text3</a>
   </span>
 </div>
</li>
<li title="text4" class="liItem ">
 <div class="divItem notattempted" data-pag="004">
   <span class="spanItem">
   <a class="aItem">text4</a>
   </span>
 </div>
</li>
<li title="text4" class="liItem ">
 <div class="divItem notattempted" data-pag="005">
   <span class="spanItem">
   <a class="aItem">text5</a>
   </span>
 </div>
</li>
<li title="text4" class="liItem ">
 <div class="divItem notattempted" data-pag="006">
   <span class="spanItem">
   <a class="aItem">text6</a>
   </span>
 </div>
</li>
<li title="text4" class="liItem ">
 <div class="divItem notattempted" data-pag="007">
   <span class="spanItem">
   <a class="aItem">text7</a>
   </span>
 </div>
</li>
</ul>

<!--this is the html code that I use for the counter:-->

<a class="nav_atras" href="#" alt="Anterior" title="Anterior">
<button class="buttMoodle" style="height: 20px;" ></button>
</a>
<div class="ViewerPagination__container">
<span class="ViewerPagination__page"></span>
<span class="ViewerPagination__points">·</span>
<span class="ViewerPagination__fullpage"></span>
</div>
<a class="nav_delante" href="#" alt="Siguiente" title="Siguiente">
<button class="buttMoodle" style="height: 20px;"></button>
</a>

如果您单击列表中的项目，它可以正常工作，但是我有“下一步”和“后退”按钮的问题，直到您从列表中选择一个项目，它才会起作用，有时它们会因为开始计数而无法正常工作 - 1, -2 当您按下后退按钮并使用前进按钮超过列表中的项目数时。

谁能帮我用最好的代码解决这个问题？谢谢。

【问题讨论】：

嗨，阿德里安，这里有一些有用的阅读材料：PaginationJS Plugin
你的项目上线了吗？我们能看到吗？如果我们可以真正调试您的代码，我们将更容易为您提供帮助..
至少请正确格式化您的代码，人们很难帮助您。

标签： javascript jquery list counter jquery-pagination

【解决方案1】：

我刚刚上传了scorm，你可以通过下一个链接在网上看到它，你只需要登录，我知道，这很无聊，但这是我可以给你看的唯一方法，所以我在等待你的帮助。

https://cloud.scorm.com/sc/InvitationConfirmEmail?publicInvitationId=6aeec00f-7333-4537-a3f3-da6ac52e1fb3

提前致谢。

【讨论】：