jqueryで属性セレクタに変数を利用したい

Question

jqueryで属性セレクタに変数を利用したい

メインイメージ（スライダーになるのでslickで実装）とサムネイルのあるフォトギャラリーを実装していて、サムネイル画像をクリックしたらそのカスタムデータ属性の値を取得、同じカスタムデータの値を持つメインイメージにclass名を付与する、という実装をしたいです。

該当のソースコード

$(function(){
  $('.thumb-photo li').click(function(){
    var thumbData = $(this).data();
    $('.main-photo li[data-slide="$(thumbData)"]').addClass('active');
  });
});

お聞きしたいこと

属性セレクタへの変数の代入のやり方が調べてもわからず、色々な書き方をしてもコンソールでundefinedとなってしまいます…。

変数を属性セレクタ内で使う正しい書き方、もしくはdata属性が変数aのとき、みたいな要素の指定の仕方が他にあればご教授いただけると幸いです。
宜しくお願いします。

Answer 1

'.main-photo li[data-slide="$(thumbData)"]'と書いても、書いた文字通りにしか解釈されません。

引用符をバッククオートにして、`.main-photo li[data-slide="$(thumbData)"]`とすれば、${}の中身が展開されます。

Comments

[manape]

お時間割いてご回答いただきありがとうございます！
初心者で``の存在を知らず、目から鱗でした。
おかげさまで解決しました。

Answer 2

'.main-photo li[data-slide="$(thumbData)"]'

この部分がこのままではうまく行かず、下記のように変え、教えていただいた``で囲むことで望んでいた結果が得られました。

var thumbIndex = $(this).index()
$(`.main-photo li:eq(${thumbIndex})`).addClass('active');