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

您可以创建一个 ID 数组 (['doc12-1', 'doc11-1', ...]) 并在其上循环；或者，我建议将特定的 class 名称放入要循环的所有元素中，并将 .on() 放入循环体中。

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

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

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

下面的代码片段将不起作用，因为我还没有添加 slick 到它 - 不过它会给你一个想法。

$(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循环？

Slick.js: How to write for loop with an array?

javascript

jquery

for-loop

slick.js