jQueryでLiquidの変数を使いたい

[yuukitanaka]

こちらのURLを参考に、マウスオーバーでの画面切り替え機能の導入を進めています。

https://osyu-web.com/jquery/mouseover-imagechange/

そのまま使用すると、テーマからセクションブロックを複数作成した際、クラス名.subimageや.mainimagが一意でないため、マウスオーバーすると他のブロックの画像まで切り替わります。

クラス名（.subimageや.mainimag）にLiquidでblock.idを足すと一意なクラス名になるため、下記のようにコードを追加しましたが、マウスオーバーしても画像が切り替わりません。

事前にassignで変数を割り当て、jQueryのvar blockID...で読み出し、各class名に足しています。

大まかな流れは間違っていないのではと思うのですが、ご助力いただけないでしょうか。

{% assign liquidblockID = block.id %}

<script>

var blockID = {{ liquidblockID }};
$(function(){
$('.subimage li').hover(function(){
//オーバーしたliのインデックスを取得
var index = $('.subimage--'+blockID li').index(this);
//オーバーした画像URLを取得
var imageurl = $('.subimage--'+blockID' li').eq(index).find('img').attr('src');
//ulのクラス名を取得（空白で分割）
className = $(this).parent().attr('class').split(" ");
//元のメイン画像を保存しておく
defaultImage = $('img.mainimage--'+blockID'.'+className[1]).attr('src');
$('img.mainimage--'+blockID'.'+className[1]).attr('src',imageurl);
},function(){
$('img.mainimage--'+blockID'.'+className[1]).attr('src',defaultImage);
});
});
</script>

<div class="box_around">
<div class="main_image_box">
<img src="{{ block.settings.image | img_url: '400x' }}" alt="{{ block.settings.image.alt }}" class="lazyload mainimage--{{ block.id }}">
</div>				
</div><!-- .box_around end -->

<div class="box_around2">
<!-- ***** サムネイル ***** -->
<div class="detail">
<ul class="subimage--{{ block.id }}">
  <li><img src="{{ block.settings.image | img_url: '400x' }}" alt="{{ block.settings.image.alt }}"></li>
  <li><img src="{{ block.settings.image2 | img_url: '400x' }}" alt="{{ block.settings.image.alt }}"></li>
  <li><img src="{{ block.settings.image3 | img_url: '400x' }}" alt="{{ block.settings.image.alt }}"></li>
</ul>
</div><!-- .detail end -->
</div><!-- .box_around end -->

[yuukitanaka]

自己解決しました。結果的にjQueryでLiquidの変数を使うことなくやりたいことは実現できました。

          <script>
            $(function(){
                $('.subimage li').hover(function(){
                    //オーバーしたliのインデックスを取得
                    var index = $('.subimage li').index(this);
                    //オーバーした画像URLを取得
                    var imageurl = $('.subimage li').eq(index).find('img').attr('src');
                    //ulのクラス名を取得（空白で分割）
                    className = $(this).parent().attr('class').split(" ");
                    //元のメイン画像を保存しておく
                    defaultImage = $('img.mainimage.'+className[1]).attr('src');
                    $('img.mainimage1.'+className[1]).attr('src',imageurl);
                },function(){
                    $('img.mainimage1.'+className[1]).attr('src',defaultImage);
                });
            });
          </script>

            
                <div class="box_around">
                  <div class="main_image_box">
                    <img src="{{ block.settings.image | img_url: '400x' }}" alt="{{ block.settings.image.alt }}" class="lazyload mainimage1 img-{{block.id}}">
                  </div>				
                </div><!-- .box_around end -->

                <div class="box_around2">
                  <!-- ***** サムネイル ***** -->
                  <div class="detail">
                    <ul class="subimage img-{{block.id}}">
                      <li><img src="{{ block.settings.image | img_url: '400x' }}" alt="{{ block.settings.image.alt }}"></li>
                      <li><img src="{{ block.settings.image2 | img_url: '400x' }}" alt="{{ block.settings.image.alt }}"></li>
                      <li><img src="{{ block.settings.image3 | img_url: '400x' }}" alt="{{ block.settings.image.alt }}"></li>
                    </ul>
                  </div><!-- .detail end -->
                </div><!-- .box_around end -->