Question

我的下一个代码存在问题

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

＆＃13;

$(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();
		 }
     });
	});
	

	

});

＆＃13;

<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>

＆＃13;

如果你单击列表中的项目，它工作正常，但我有下一个和后退按钮的问题，它只有你从列表中选择一个项目后才能工作，有时它们开始计数时工作很糟糕 - 1，-2，当您按下后退按钮时，它们会使用前进按钮超过列表中的项目数。

有人可以用最好的代码帮助我解决这个问题吗？感谢。

Answer 1

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

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

提前致谢。

jquery页面计数器，分页

1 个答案: