改变flickity样式：使用JS进行样式修改

Question

<p>我在使用js访问样式方面遇到了一个Flickity问题，具体来说，是指示点的样式。我希望这些点能够根据一个数组中的颜色进行着色（在我的项目中，这应该是一个动态数组，但为了简化测试案例，目前是静态的）。我的函数适用于与我在Flickity轮播下方的html中放置的指示点具有相同类名的元素。</p> <p>这是一个forked（从Flickity文档）和更改的CodePen，以说明我的问题：<br /> <a href="https://codepen.io/Insa-Deist/pen/jOXNOKM">https://codepen.io/Insa-Deist/pen/jOXNOKM</a></p> <p>提前感谢任何提示。</p> <p>我添加的js应该是正确的，我已经在不在Flickity轮播容器中的另一行点上尝试过，这些点具有js所讲的相同类名（当我打开我的项目的源代码时，指示点也具有相同的类名）。</p> <p>*刚刚收到一个警告，要求我也在这里粘贴代码，所以我就粘贴在这里了：</p> <p>html</p> <pre class="brush:php;toolbar:false;"><h1>Flickity - freeScroll, wrapAround</h1> <!-- Flickity HTML init --> <div class="carousel" data-flickity='{ "freeScroll": true, "wrapAround": true }'> <div class="carousel-cell"></div> <div class="carousel-cell"></div> <div class="carousel-cell"></div> <div class="carousel-cell"></div> <div class="carousel-cell"></div> </div> <br><br><br> <p> row of dots to show the js function with the color array --> ISSUE: i want the indicator dots from the carousel also be colored from that array, why is i not working even though they also have the .dot class assigned when I open the sourcecode of my project</p> <div class"flickity-page-dots"> <li class="dot"></li> <li class="dot"></li> <li class="dot"></li> <li class="dot"></li> <li class="dot"></li> </div></前> <p>CSS</p>

/* 外部 css: flickity.css */

* { 框大小：边框框； }

正文 { 字体系列：无衬线体； }

.轮播{
  背景：#FAFAFA；
}

.carousel-cell {
  宽度：66%；
  高度：200px；
  右边距：10px；
  背景：#8C8；
  边框半径：5px；
  反增量：轮播单元；
}

/* 细胞数量 */
.carousel-cell:之前{
  显示：块；
  文本对齐：居中；
  内容：计数器（轮播单元）；
  行高：200px；
  字体大小：80px；
  白颜色;
}

.点{
    显示：内联块；
    宽度：10px；
    高度：10px；
    边距：0 8 像素；
    边界半径：50%；
    不透明度：1；
    光标：指针；
}
.flickity-page-dots .dot{
  不透明度：1；
}
.flickity-page-dots .dot.is-selected {
  -webkit-过滤器：模糊（3px）；
  -moz-过滤器：模糊（3px）；
  -o-滤镜：模糊（3px）；
  -ms-filter：模糊（3px）；
  滤镜：模糊(3px);}

; <p>js</p>

//外部js:flickity.pkgd.js
var 颜色 = ["#e57373", "#ba68c8", "#90caf9", "#4db6ac", "#dce775", "#ffb74d", "#b0bec5", "#FF69B4"];
var customContainer = Array.from(document.querySelectorAll('.dot'));

customContainer.forEach(函数(节点, i) {
    节点.样式.背景 = 颜色[i % 颜色.长度];
});</pre>
<p><br />></p>

Answer 1

在codepen上尝试一下：

// 外部js: flickity.pkgd.js
    function changeColor(){
    var colors = ["#e57373", "#ba68c8", "#90caf9", "#4db6ac", "#dce775", "#ffb74d", "#b0bec5", "#FF69B4"];
    var customizeContainer = Array.from(document.querySelectorAll('.dot'));
    
    customizeContainer.forEach(function(node, i) {
        node.style.background = colors[i % colors.length];
        console.log(colors[i % colors.length]);
    });
    }
    var flkty = new Flickity( '.carousel', {
      on: {
        ready: function() {
         changeColor();
        }
      }
    });