尝试使用循环将数组附加到 Swiper.js 的项目符号

Question

我正在尝试将以下内容转换为更优雅的解决方案，也许是一个循环：

jQuery(document).ready(function () {
var swiper = new Swiper('.swiper-container', {
    pagination: '.swiper-pagination',
    paginationClickable: true,
    paginationBulletRender: function (swiper, index, className) {
        var index;
        var a = ['Item One', 'Item Two', 'Item Three', 'Item Four', 'Item Five'];
        if (index === 0) {
            return '<span class="' + className + '">' + (a[0]) + '</span>';
        }
        if (index === 1) {
            return '<span class="' + className + '">' + (a[1]) + '</span>';
        }
         if (index === 2) {
            return '<span class="' + className + '">' + (a[2]) + '</span>';
        }
         if (index === 3) {
            return '<span class="' + className + '">' + (a[3]) + '</span>';
        }
         if (index === 4) {
            return '<span class="' + className + '">' + (a[4]) + '</span>';
        }
         if (index === 5) {
            return '<span class="' + className + '">' + (a[5]) + '</span>';
        }
    }
});

});

我尝试了各种循环技术，例如 this SO post 中的技术，尤其是这个：

var index;
var a = ["a", "b", "c"];
for (index = 0; index < a.length; ++index) {
    console.log(a[index]);
}

将此创建为循环：

jQuery(document).ready(function () {
    var swiper = new Swiper('.swiper-container', {
        pagination: '.swiper-pagination',
        paginationClickable: true,
        paginationBulletRender: function (swiper, index, className) {
            var index;
            var a = ['Item One', 'Item Two', 'Item Three', 'Item Four', 'Item Five'];
            for (index = 0; index < a.length; ++index) {
                return '<span class="' + className + '">' + (a[index]) + '</span>';
            }
        }
    });

});

但这只显示数组中每个项目符号的第一项。我创建了一个 JS Fiddle here.

这只是一个原型，所以数组不会改变，有人可以帮忙吗？

谢谢！

Answer 1

Swiper 本身重复了五次，你不需要再次循环来迭代检查解决方案 >> https://jsfiddle.net/nv0mfy0z/1/

var a = ['Item One', 'Item Two', 'Item Three', 'Item Four', 'Item Five'];

paginationBulletRender: function (swiper, index, className) {
       return '<span class="' + className + '">' + (a[index]) + '</span>';            
    }

尝试使用循环将数组附加到 Swiper.js 的项目符号

Trying to append an array to the bullets of Swiper.js using a loop

javascript

arrays

loops

swiper