改變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 aldot have the .so 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();
        }
      }
    });