如何在动态元素上添加多个类，其中一个具有递增的数字？答案

【问题标题】：How to add multiple classes, one with incrementing numbers, on a dynamic element?如何在动态元素上添加多个类，其中一个具有递增的数字？
【发布时间】：2018-01-28 22:14:29
【问题描述】：

我一直在尝试使用带有自定义类的滑动滑块创建一些幻灯片。

<!-- Swiper -->
<div class="swiper-container">
    <div class="swiper-wrapper">
        <div class="swiper-slide">Slide 1</div>
        <div class="swiper-slide">Slide 2</div>
        <div class="swiper-slide">Slide 3</div>
        <div class="swiper-slide">Slide 4</div>
        <div class="swiper-slide">Slide 5</div>
        <div class="swiper-slide">Slide 6</div>
        <div class="swiper-slide">Slide 7</div>
        <div class="swiper-slide">Slide 8</div>
        <div class="swiper-slide">Slide 9</div>
        <div class="swiper-slide">Slide 10</div>
    </div>
    <!-- Add Pagination -->
    <div class="swiper-pagination"></div>
</div>
<!-- Swiper JS -->
<script src="../dist/js/swiper.min.js"></script>
<!-- Initialize Swiper -->
<script>
var swiper = new Swiper('.swiper-container', {
    pagination: '.swiper-pagination',
    paginationClickable: true,
    paginationBulletRender: function (swiper, index, className) {
        return '<span class="' + className + '">' + (index + 1) + '</span>';
    }
});
</script>

滑动分页是动态创建并生成到

<span class="swiper-pagination-bullet">1</span>
<span class="swiper-pagination-bullet">2</span>
<span class="swiper-pagination-bullet">3</span>
<span class="swiper-pagination-bullet">4</span>
<span class="swiper-pagination-bullet">5</span>
<span class="swiper-pagination-bullet">6</span>

我想让 div 类 swiper 分页到

<span class="swiper-pagination-bullet color-0">1</span>
<span class="swiper-pagination-bullet color-1">2</span>
<span class="swiper-pagination-bullet color-2">3</span>

如何添加额外的 color-0、color-1、color-2 自定义类？非常感谢。

【问题讨论】：

标签： javascript jquery wordpress slider swiper

【解决方案1】：

return '<span class="'+ className +' color-'+index+'" >'+(index+1)+'</span>';

【讨论】：

有效！太感谢了！我已经尝试解决这个问题 3 个小时了。
太棒了！有几种方法可以做到这一点。但根据您的代码，这是最简单的。您始终可以向动态创建的元素添加多个类。如果它回答了您的问题，请将其标记为我和社区接受的答案:)