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。

这仅适用于原型，因此Array不会改变，请有人帮忙吗？

谢谢！

Answer 1

Swiper本身重复五次，您不需要再次循环来迭代检查解决方案＆gt;＆gt; 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的项目符号

1 个答案: