0

我使用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);
});
4

2 回答 2

1

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

使用该索引，您可以定位权利section并检索其data-yearusing .data()。

在下面的片段中（请在整页中运行），我隐藏了显示哪个部分处于活动状态的图标...并快速使用 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>

代码笔

于 2018-04-16T05:59:03.787 回答
0

似乎您在示例中使用了 jQuery。您可以通过官方文档.attr()中的描述从 HTML 元素中获取属性。

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

于 2018-04-16T05:36:22.020 回答