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

Question

I'm trying to implement slide numbers for each of my galleries using slick.js.

My code works well, but I believe it could be written much easier than repeating every line of code for each id. Since I have a lot of galleries in my original document, this gets really messy. I am familiar with arrays, but I don't know how the code should be written with a "for" loop in jQuery.

Here's my code:

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

Thanks for any help!

Answer 1

You can either create an array of ids ( ['doc12-1', 'doc11-1', ...] ) and loop on them; or, I would suggest putting a specific class name to all the elements you want to loop through and put the .on() in the body of the loop.

You can choose to use $.each or $.map as the looping construct.

EDIT: I just realized, you won't need to loop at all, when you do $('.gallery'), and run a .on() on that collection, it'll assign the function() to all of the elements for that filter.

The status element for each of the doc element can be put inside a data-status-filter attribute that you can fetch for each element while looping through it.

The snippet below will not work as I haven't added slick to it yet - it'll give you an idea though.

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