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

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

使用该索引，您可以定位右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

Answer 2

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

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

在单页滚动分页中获取数据属性

2 个答案: