<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></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>
1
764
![ThinkPHP5快速开发企业站点[全程实录]](https://img.php.cn/upload/course/000/000/068/6253d918a3ce7278.png)
收藏
在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(); } } });