フリッキー スタイルの変更: スタイルの変更には JS を使用します

Question

<p>js を使用してスタイル、特にインジケーター ポイントのスタイルにアクセスすると、Flickity の問題が発生します。配列内の色に基づいてポイントに色を付けたいと考えています (私のプロジェクトでは、これは動的配列である必要がありますが、テスト ケースを簡素化するために現在は静的です)。私の関数は、Flickity カルーセルの下の HTML に配置したインジケーター ポイントと同じクラス名の要素に対して機能します。 </p> <p>これは、私の問題を説明するために (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 が話しているのと同じクラス名を持つ別のポイント行で試してみました (ソース コードを開いたとき) project 、キュー ポイントも同じクラス名を持ちます)。 </p> <p>*ここにもコードを貼り付けるように求める警告が表示されたので、ここに貼り付けます: </p> <p>html</p> <pre class="brush:php;toolbar:false;"><h1>Flickity - freeScroll、wrapAround</h1> <!-- Flickity HTML 初期化 --> <div class="カルーセル" data-flickity='{ "freeScroll": true, "wrapAround": true }'> <div class="カルーセルセル"></div> <div class="カルーセルセル"></div> <div class="カルーセルセル"></div> <div class="カルーセルセル"></div> <div class="カルーセルセル"></div> </div>



<p> カラー配列で js 関数を表示するためのドットの行 --> 問題: カルーセルのインジケーター ドットもその配列から色付けしたいのですが、.dot もあるにもかかわらず機能しないのはなぜですかプロジェクトのソースコードを開いたときに割り当てられるクラス</p> <div クラス「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;">/* 外部 CSS: flickity.css */ * { ボックス サイズ: ボーダー ボックス; } body { フォントファミリー: サンセリフ; } .カルーセル { 背景: #FAFAFA; } .carousel-cell { 幅: 66%; 高さ: 200ピクセル; 右マージン: 10px; 背景: #8C8; 境界半径: 5px; カウンタインクリメント: カルーセルセル; } /* セル番号 */ .carousel-cell:before { 表示ブロック; テキスト整列: 中央; 内容: カウンタ(カルーセルセル); 行の高さ: 200px; フォントサイズ: 80px; 色: 白; } .ドット{ 表示: インラインブロック; 幅: 10px; 高さ: 10px; マージン: 0 8px; 境界半径: 50%; 不透明度: 1; カーソル: ポインタ; } .flickity-page-dots .dot{ 不透明度: 1; } .flickity-page-dots .dot.is-selected { -webkit-filter: ぼかし(3px); -moz-フィルター: ぼかし(3px); -o-フィルター: ぼかし(3px); -ms-filter: ぼかし(3px); フィルター:blur(3px);}</pre> <p>js</p> <pre class="brush:php;toolbar:false;">// 外部 js: flickity.pkgd.js var color = ["#e57373", "#ba68c8", "#90caf9", "#4db6ac", "#dce775", "#ffb74d", "#b0bec5", "#FF69B4"]; varcustomizeContainer = Array.from(document.querySelectorAll('.dot')); customizeContainer.forEach(function(node, i) { node.style.background = Colors[i % Colors.length]; });</pre> <p><br /></p>

Answer 1

コードペンで試してみる:

リーリー