2種類の文字サイズのテキストを、特定箇所のホバーで同時にシャッフルさせたい。

Question

実現したいこと

JavaScriptの「shuffle-text」を使用して
マウスオーバーしたらテキストがシャッフルされる動きを実装しています。
https://ics.media/entry/15498/

ttlと、copyで違う文字サイズをcssで指定して、
.shuffle-con-aにホバーさせた際に両方がシャッフルするような動きにしたいです。

発生している問題・分からないこと

https://teratail.com/questions/345848
↑
こちらの回答を参考に、（.shuffle-con-a）にマウスホバーした時に、
テキストがシャッフルする動きを作成していました。
（.shuffle-conは複数表示する予定）
ttlとcopyの両方を動くように指定したのですが片方しかシャッフルの動作が行われません。

該当のソースコード

<div class="content">
	<a href="#" class="shuffle-con-a"> <img src="img.jpg" alt="">
	<div class="ttl">タイトル入るタイトルテキスト入ります。</div>
	<div class="copy">テキスト入ります。ダミーですテキスト入ります。</div>
	</a>
</div>

function init() {
    var effectList = [];
    var elementList = document.querySelectorAll('.ttl , .copy');
    var hoverTarget = document.getElementsByClassName("shuffle-con-a");
    
    for (let i = 0; i < elementList.length; i++) {
        var element = elementList[i];
        element.dataset.index = i;
        effectList[i] = new ShuffleText(element);
        
        hoverTarget[i].addEventListener('mouseenter', function () {
            effectList[i].start();
        });
    }
}

試したこと・調べたこと

• teratailやGoogle等で検索した
• ソースコードを自分なりに変更した
• 知人に聞いた
• その他

上記の詳細・結果

両方動作するようにしてみたのですがうまくいきませんでした。

function init() {
    var effectList = [];
    var elementList = document.querySelectorAll('.ttl , .copy');
    var hoverTarget = document.getElementsByClassName("hover");
    for (let i = 0; i < elementList.length; i++) {
        var element = elementList[i];
        element.dataset.index = i;
        if (element.classList.contains('ttl')) {
            effectList[i] = new ShuffleText(element);
        } else if (element.classList.contains('copy')) {
            effectList[i] = new ShuffleText(element);
        }

        hoverTarget[i].addEventListener('mouseenter', function () {
            effectList[i].start();
        });
    }
}

補足

実際のコード部分です

          <li class="item sort01">
            <div class="item-content"> <a href="#" class="shuffle-con-a"> <img src="img/img_sq01.jpg" alt="">
              <div class="mask">
                <div class="ttl">タイトル入るタイトルテキスト入ります。</div>
                <div class="copy">テキスト入ります。ダミーですテキスト入ります。</div>
              </div>
              </a></div>
          </li>
          <li class="item sort02">
            <div class="item-content"> <a href="#" class="shuffle-con-a"> <img src="img/img_sq02.jpg" alt="">
              <div class="mask">
                <div class="ttl">タイトル入るタイトルテキスト入ります。</div>
                <div class="copy">テキスト入ります。ダミーですテキスト入ります。</div>
              </div>
              </a></div>
          </li>

Comments

[int32_t]

ブラウザの開発者ツールのコンソールにエラーが出ていませんか。

[Lhankor_Mhy]

ご提示のコードですと、elementList と hoverTarget が同じ要素数である必要があると思いますが、ご提示のHTMLではそうではないようです。実際のコードではどうなっていますか？

[tana2]

コメントありがとうございます。
すみませんJavaScriptに関して理解が乏しく、同じ要素数というのがよく分かっておりません、申し訳ありません。
実際のコード部分記載しました。

Answer 1

たとえば「.shuffle-con-a」内の要素間でmouseover/outが変わった場合はどうするのでしょうか？具体的にはttlからcopyにマウスが移動したときにmouseoverは発生するかどうかという話です。
とりあえず発生させていいのであればこんな感じで

<script src=" https://cdn.jsdelivr.net/npm/shuffle-text@0.4.0/build/shuffle-text.min.js "></script>
<script>
window.addEventListener('DOMContentLoaded', ()=>{
  document.querySelectorAll('.shuffle-con-a .ttl,.shuffle-con-a .copy').forEach(el=>{
    el.start=function(){new ShuffleText(this).start()};
    el.dataset.txt=el.textContent;
  }); 
  document.addEventListener('mouseover',({target})=>{
    target.closest('.shuffle-con-a')?.querySelectorAll('[data-txt]').forEach(el=>{
      el.start();
    });
  });
  document.addEventListener('mouseout',({target})=>{
    target.closest('.shuffle-con-a')?.querySelectorAll('[data-txt]').forEach(el=>{
      el.textContent=el.dataset.txt;
    });
  });
});
</script>
<div class="content">
<a href="#" class="shuffle-con-a"> <img src="img.jpg" alt="img">
<div class="ttl">タイトル入るタイトルテキスト入ります。</div>
<div class="copy">テキスト入ります。ダミーですテキスト入ります。</div>
</a>
</div>

参考

「.shuffle-con-a」内の要素間の移動でシャッフルを発生させない場合。
やりようは色々あると思いますがこんな感じがお手軽で良いかも
mouseoverがmouseenterになるのでご注意ください

<script src=" https://cdn.jsdelivr.net/npm/shuffle-text@0.4.0/build/shuffle-text.min.js "></script>
<script>
window.addEventListener('DOMContentLoaded', ()=>{
  document.querySelectorAll('.shuffle-con-a .ttl,.shuffle-con-a .copy').forEach(el=>{
    el.start=function(){new ShuffleText(this).start()};
    el.dataset.txt=el.textContent;
  }); 
  document.addEventListener('mouseenter',({target})=>{
    if(target.matches('.shuffle-con-a')){
      target.querySelectorAll('[data-txt]').forEach(el=>{
        el.start();
      });
    }
  },true);
  document.addEventListener('mouseout',({target})=>{
    target.closest('.shuffle-con-a')?.querySelectorAll('[data-txt]').forEach(el=>{
      const timerId=setInterval(()=>{
        if(el.textContent==el.dataset.txt) clearInterval(timerId);
        el.textContent=el.dataset.txt;
      },100);
    });
  });
});
</script>
<div class="content">
<a href="#" class="shuffle-con-a"> <img src="img.jpg" alt="img">
<div class="ttl">タイトル入るタイトルテキスト入ります。</div>
<div class="copy">テキスト入ります。ダミーですテキスト入ります。</div>
</a>
</div>

Comments

[tana2]

回答ありがとうございます。
無事解決しました、本当にありがとうございました！！！！
書き方もこれから自分で書けるようになれるようになりたいです。
本当にありがとうございました！