<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;">&lt;h1&gt;Flickity - freeScroll, wrapAround&lt;/h1&gt; &lt;!-- Flickity HTML init --&gt; &lt;div class="carousel" data-flickity='{ "freeScroll": true, "wrapAround": true }'&gt; &lt;div class="carousel-cell"&gt;&lt;/div&gt; &lt;div class="carousel-cell"&gt;&lt;/div&gt; &lt;div class="carousel-cell"&gt;&lt;/div&gt; &lt;div class="carousel-cell"&gt;&lt;/div&gt; &lt;div class="carousel-cell"&gt;&lt;/div&gt; &lt;/div&gt; &lt;br&gt;&lt;br&gt;&lt;br&gt; &lt;p&gt; row of dots to show the js function with the color array --&gt; 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&lt;/p&gt; &lt;div class"flickity-page-dots"&gt; &lt;li class="dot"&gt;&lt;/li&gt; &lt;li class="dot"&gt;&lt;/li&gt; &lt;li class="dot"&gt;&lt;/li&gt; &lt;li class="dot"&gt;&lt;/li&gt; &lt;li class="dot"&gt;&lt;/li&gt; &lt;/div&gt;</pre> <p>css</p> <pre class="brush:php;toolbar:false;">/* external css: flickity.css */ * { box-sizing: border-box; } body { font-family: sans-serif; } .carousel { background: #FAFAFA; } .carousel-cell { width: 66%; height: 200px; margin-right: 10px; background: #8C8; border-radius: 5px; counter-increment: carousel-cell; } /* cell number */ .carousel-cell:before { display: block; text-align: center; content: counter(carousel-cell); line-height: 200px; font-size: 80px; color: white; } .dot { display: inline-block; width: 10px; height: 10px; margin: 0 8px; border-radius: 50%; opacity: 1; cursor: pointer; } .flickity-page-dots .dot{ opacity: 1; } .flickity-page-dots .dot.is-selected { -webkit-filter: blur(3px); -moz-filter: blur(3px); -o-filter: blur(3px); -ms-filter: blur(3px); filter: blur(3px);}</pre> <p>js</p> <pre class="brush:php;toolbar:false;">// external js: flickity.pkgd.js 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]; });</pre> <p><br /></p>

// 外部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();
        }
      }
    });