app/template/cosme41/Block/mezasu_js.twig line 1

Open in your IDE?
  1. <script>
  2.             document.addEventListener('DOMContentLoaded', function() {
  3.                 // ページ上のすべての '.ec-itemNav' 要素を取得します。
  4.                 // これにより、PC版とスマホ版の両方のナビゲーションが対象になります。
  5.                 const ecItemNavContainers = document.querySelectorAll('.ec-itemNav');
  6.                 
  7.                 // 検索したいキーワードを定義します。
  8.                 const searchWord = '悩み';
  9.                 // 各 '.ec-itemNav' コンテナに対して処理を行います。
  10.                 ecItemNavContainers.forEach(container => {
  11.                     // そのコンテナ内のすべての 'a' タグを見つけます。
  12.                     const linksInContainer = container.querySelectorAll('a');
  13.                     // 見つかった各 'a' タグに対して処理を行います。
  14.                     linksInContainer.forEach(link => {
  15.                         // 'a' タグのテキスト内容に '悩み' というワードが含まれているかチェックします。
  16.                         // .trim() を使って、テキスト前後の不要な空白を取り除きます。
  17.                         if (link.textContent.trim().includes(searchWord)) {
  18.                             // もし含まれていたら、その 'a' タグの最も近い親の 'li' 要素を取得します。
  19.                             const parentLi = link.closest('li');
  20.                             
  21.                             // 親の 'li' 要素が存在することを確認し、クラスを追加します。
  22.                             if (parentLi) {
  23.                                 parentLi.classList.add('mezasu-list');
  24.                                 // デバッグ用: クラスが追加されたことをコンソールに出力
  25.                                 console.log('mezasu-list クラスを追加しました:', parentLi);
  26.                             }
  27.                         }
  28.                     });
  29.                 });
  30.                 console.log('--- 「悩み」リストのクラス付与スクリプト実行終了 ---');
  31.             });
  32.         </script>