Question

我正在尝试使用slick.js为每个画廊实现幻灯片编号。

我的代码效果很好，但我相信它可以比为每个id重复每行代码容易得多。由于我的原始文档中有很多画廊，因此非常混乱。我熟悉数组，但我不知道如何使用＆＃34; for＆＃34;来编写代码。在jQuery中循环。

这是我的代码：

＆＃13;

$(document).ready(function() {

  var $status = $('.pagingInfo');

  $('#doc12-1').on('init reInit afterChange', function(event, slick, currentSlide, nextSlide) {
    //currentSlide is undefined on init -- set it to 0 in this case (currentSlide is 0 based)
    var i = (currentSlide ? currentSlide : 0) + 1;
    $status.text(i + '/' + slick.slideCount);
  });

  var $status2 = $('.pagingInfo2');

  $('#doc11-1').on('init reInit afterChange', function(event, slick, currentSlide, nextSlide) {
    var i = (currentSlide ? currentSlide : 0) + 1;
    $status2.text(i + '/' + slick.slideCount);
  });

  $('.gallery').slick({
    fade: true,
    dots: false,
    prevArrow: false,
    nextArrow: false,
    speed: 0,
  });
});

＆＃13;

<div class="medium">

  <figure id="doc12-1" class="gallery">

    <div><img data-lazy="p/doc12/repros/doc12-1.jpg"></div>
    <div><img data-lazy="p/doc12/repros/doc12-2.jpg"></div>
    <div><img data-lazy="p/doc12/repros/doc12-3.jpg"></div>

  </figure>
  <span class="pagingInfo"></span>
</div>

<div class="medium">

  <figure id="doc11-1" class="gallery">

    <div><img data-lazy="p/doc11/repros/doc11-1.jpg"></div>
    <div><img data-lazy="p/doc11/repros/doc11-2.jpg"></div>
    <div><img data-lazy="p/doc11/repros/doc11-3.jpg"></div>

  </figure>
  <span class="pagingInfo2"></span>
</div>

＆＃13;

感谢您的帮助！

Answer 1

你可以创建一个id数组（['doc12-1', 'doc11-1', ...]）并循环它们;或者，我建议将一个特定的类名称放到你要遍历的所有元素上，并将.on()放在循环体中。

您可以选择使用$.each或$.map作为循环结构。

编辑：我刚刚意识到，当你执行$（'。gallery'）并在该集合上运行.on（）时，你根本不需要循环，它会将function（）分配给该过滤器的所有元素。

每个doc元素的status元素都可以放在data-status-filter属性中，您可以在循环遍历每个元素时获取该属性。

下面的代码段不起作用，因为我还没有添加光滑的内容 - 它会给你一个想法。

$(document).ready(function() {
  $('.gallery').on('init reInit afterChange', function(event, slick, currentSlide, nextSlide){
      var currentStatusFilter = $(this).data().statusFilter;
      console.log(currentStatusFilter);
      var i = (currentSlide ? currentSlide : 0) + 1;
      $(currentStatusFilter).text(i + '/' + slick.slideCount);
  });

  $('.gallery').slick({
    fade: true,
    dots: false,
    prevArrow: false,
    nextArrow: false,
    speed: 0,
  });
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="medium">

  <figure id="doc12-1" class="gallery" data-status-filter=".pagingInfo">

    <div><img data-lazy="p/doc12/repros/doc12-1.jpg"></div>
    <div><img data-lazy="p/doc12/repros/doc12-2.jpg"></div>
    <div><img data-lazy="p/doc12/repros/doc12-3.jpg"></div>

  </figure>
  <span class="pagingInfo"></span>
</div>

<div class="medium">

  <figure id="doc11-1" class="gallery" data-status-filter=".pagingInfo2">

    <div><img data-lazy="p/doc11/repros/doc11-1.jpg"></div>
    <div><img data-lazy="p/doc11/repros/doc11-2.jpg"></div>
    <div><img data-lazy="p/doc11/repros/doc11-3.jpg"></div>

  </figure>
  <span class="pagingInfo2"></span>
</div>

Slick.js：如何使用数组编写for循环？

1 个答案: