javascript - Slick.js:如何使用数组编写 for 循环？

Question

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

我的代码运行良好，但我相信它可以比为每个 id 重复每一行代码更容易编写。由于我的原始文档中有很多画廊，这变得非常困惑。我熟悉数组，但不知道如何在 jQuery 中使用“for”循环编写代码。

这是我的代码:

$(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,
  });
});

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

感谢您的帮助!

Answer 1

您可以创建一个 ids 数组 (['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>