如何使用JQUERY中的自定义数据属性使我的分页脚本工作？

Question

我正在尝试创建由自定义数据属性触发的分页/轮播脚本。我的目标是让它变得动态，因此可以在不修改脚本的情况下添加额外的幻灯片。

到目前为止，当我点击后面和下一个链接时没有任何反应。由于我试图让一切互动的方式，我不确定我使用的逻辑是否有任何意义。我还计划将它们放入和滑出，而不是仅仅将显示从一个块切换到无块，只是试图保持它的可管理性，并在关注该部分之前使其工作。

以下是我在html中使用数据属性设置幻灯片的方式。

    <section class="page" id="page01" data-page="1">
        first section
    </section>

    <section class="page" id="page02" data-page="2">
        second section
    </section>

    <section class="page" id="page03" data-page="3">
        third section
    </section>

    <section class="page" id="page04" data-page="4">
        fourth section
    </section>

这是脚本

function pSlide(){

        /* links to navigate slides */
        var back = $("#back-link");
        var next = $("#next-link");

        /* collects the count of elements with page class */
        var pCount = $(".page").length;

        /* points to the visible slide and selects id */
        var curPage = $('.page[style*="block"]').attr('id');

        /* collects value of custom data attribute from visible slide */
        var curPageNo = curPage.data('page');

        /* adds or subtracts from the value of data attribute to select slides */
        var prePage = curPageNo - 1;
        var nexPage = curPageNo + 1;



        /* back link */
        $(back).click(function(){

            /* turns off current slide */
            $(curPage).css("display", "none");

            /* if the first page is visible select last page */
            if (curPageNo == 1){

                /* selects page with value of total count */
                $(".page").data('page' == pCount).css("style", "block");
            }

            /* if any slice other than the first one is active */
            else{

                /* calculates value of previous page */
                $(".page").data('page' + prePage).css("style", "block");
            }

        });

        /* same as back link but in reverse to move forwards */
        $(next).click(function(){
            $(curPage).css("display", "none");

            if (curPageNo == pCount){
                $(".page").data('page' == 1).css("style", "block");
            }
            else{
                $(".page").data('page' + nexPage).css("style", "block");
            }

        });
    }

进入这个我不确定我应该如何尝试这样做但是我能做到最好。我怎样才能做到这一点？

这是一个小提琴

https://jsfiddle.net/Optiq/b5u6to0x/3/

Answer 1

这是我编辑你的小提琴时想出的。它不会更新分页显示，但会进行页面交换。

＆＃13;

＆＃13;

jQuery(function($){
	var $pages = $('.page');
  
	function adjustPage(adjustment){
  	var currentPageIndex = $pages.index($('.page.active')),
    	nextPage = (currentPageIndex + adjustment) % $pages.length;
    
    if (nextPage < 0) nextPage = $pages.length - 1;
    
    $pages.removeClass('active').eq(nextPage).addClass('active');
  }
  
	$('#back-link').on('click', function(){ adjustPage(-1) });
  $('#next-link').on('click', function(){ adjustPage(1) });
});

＆＃13;

*{
				margin: none;
				padding: none;
			}
			
			body{
				background-color: #333;
			}
			
			header{
				width: 100%;
				height: 4em;
				background-color: #414149;
				position: absolute;
				right: 0;
				top: 0;
				left: 0;
				text-align: center;
				display: block;
			}
			
			footer{
				width: 100%;
				height: 2.9em;
				background-color: #414149;
				position: absolute;
				right: 0;
				bottom: 0;
				left: 0;
				text-align: center;
				display: block;
			}
			
			
			
			.foot-nav{
				width: 22%;
				height: 66%;
				background-color: aliceblue;
				margin: .22em auto;
				font-size: 2em;
			}
			
			.page{
				height: 83vh;
				background-color: #777;
				margin: auto;
        display: none;
			}
      
      .page.active {
        display: block;
      }
			
			#back-link{
				float: left;
				margin-left: 17%;
			}
			
			#next-link{
				float: right;
				margin-right: 17%;
			}

＆＃13;

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div style="height: 3.8em;"></div>
		
		<section class="page active" id="page01" data-page="1">
			first section
		</section>
		
		<section class="page" id="page02" data-page="2">
			second section
		</section>
		
		<section class="page" id="page03" data-page="3">
			third section
		</section>
		
		<section class="page" id="page04" data-page="4">
			fourth section
		</section>
		
		<footer>
			
			<nav class="foot-nav">
				<span id="back-link" class="page_change">
					&#60;
				</span>
				
				<span>1</span>
				<span>/</span>
				<span>4</span>
				
				<span id="next-link" class="page_change">
					&#62;
				</span>
			</nav>
			
		</footer>

＆＃13;

＆＃13;

＆＃13;