在onepage-scroll分页中获取数据属性

Question

我使用 One Page Scroll 全屏轮播。我想在分页中显示 data-attribute。到目前为止，我能够在分页中显示幻灯片的数量。如何在分页中得到 data-attribute？

这里我想分页显示年份

HTML

<div id="main" class="main">
  <section data-year="1950" class="page1">
  <div class="page_container">
    <h1>Forward Thinking</h1>
            <p>"Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua"</p>
    </div>
</section>
<section data-year="1960" class="page2">
  <div class="page_container">
    <h1>iPhone 5S</h1>
    <p>"Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua."</p>
  </div>
</section>
</div>

JavaScript

$('ul.onepage-pagination li a').each(function() {
    var elem = $(this);
    var li = elem.parent();
    var ul = li.parent();
    elem.html((li.index() + 1) + '/' + ul.children().length);
});

Answer 1

您的示例中似乎使用了 jQuery。您可以通过 .attr() 从 HTML 元素获取属性，如 official docs.

中所述

在您的示例中，您只需在相应的元素上调用 .attr('data-year') 即可获取其值。

Answer 2

要获取右边section的数据属性，可以使用.each()函数提供的index你已经用过

使用该索引，您可以定位到右侧 section 并使用 .data().

检索其 data-year

在下面的代码片段中（请运行整页显示），我隐藏了显示哪个部分处于活动状态的图标...并快速播放CSS 最大限度地利用文本链接。

$(".main").onepage_scroll();

var sections = $(".main section");

$('ul.onepage-pagination li a').each(function(index) {
  var elem = $(this);
  var li = elem.parent();
  var ul = li.parent();
  
  elem.html(sections.eq(index).data("year")+" - "+(li.index() + 1) + '/' + ul.children().length);
});

.onepage-pagination ul{
  with:6em;
}
.onepage-pagination a{
  width:100% !important;
}
.onepage-pagination a:before{
  display:none !important;
}
.onepage-pagination a.active{
  font-weight:bold;
  text-decoration:none;
}

<link href="https://cdnjs.cloudflare.com/ajax/libs/onepage-scroll/1.3.1/onepage-scroll.css" rel="stylesheet"/>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/onepage-scroll/1.3.1/jquery.onepage-scroll.min.js"></script>

<div id="main" class="main">
  <section data-year="1950" class="page1">
    <div class="page_container">
      <h1>Forward Thinking</h1>
      <p>"Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua"</p>
    </div>
  </section>
  <section data-year="1960" class="page2">
    <div class="page_container">
      <h1>iPhone 5S</h1>
      <p>"Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua."</p>
    </div>
  </section>
</div>

CodePen

在onepage-scroll分页中获取数据属性

Get data-attribute in onepage-scroll pagination

javascript

jquery

custom-data-attribute

onepage-scroll