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

Question

我正在尝试创建一个由自定义数据属性触发的 paginating/carousel 脚本。我的目标是让它变得动态，这样就可以在不修改脚本的情况下添加额外的幻灯片。

到目前为止，当我点击后退和下一个链接时没有任何反应。由于我试图让所有东西交互的方式，我不确定我使用的逻辑是否有意义。我还计划将它们滑入和滑出，而不是仅仅将显示从块切换到 none，只是试图在专注于该部分之前使其易于管理并使其正常工作。

这是我在 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");
            }

        });
    }

开始时，我不确定我应该如何尝试去做，但我已经尽我所能。我怎样才能使这项工作？

这里有 fiddle 个

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

Answer 1

这是我通过编辑您的 fiddle 得出的结论。它不会更新分页显示，但会进行页面交换。

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

*{
    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%;
   }

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

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

How can I make my paginating script work using custom data attributes in JQUERY?

html

jquery

custom-data-attribute