jQueryのセレクタ内で変数を使用する方法について

Question

現在モーダルウィンドウを実装しようとしているのですが、each文で繰り返し表示している部分から発火させようとしているため、クリックした箇所のdata-idを取得して、それに対応するdata-idを持つ要素をモーダルウィンドウで表示させようとしています。

$(function(){
  $('.js-modal-open').on('click',function(){
      let tasklist = $(this).data("id")
      console.log(tasklist)
      $('.js-modal[data-id = "tasklist"]').fadeIn();
      return false;
  });
});

現在の記述は上記のようになっています。
console.logには1や2などのdata-idに入っている値が表示されています。

.js-modalクラスの中でdata-idがtasklistになっている物を指定して表示されるようにしたいのですが、

     $('.js-modal[data-id = "tasklist"]').fadeIn();

このように書いても変数が上手く使えていないようで、うまく機能してくれません。

「jQuery　セレクタ　変数」などで調べてみたら+を使用する方法なども書かれていたので、色々と試して見たのですが、上手くいかず・・・。

また、

     $('.js-modal[data-id = "1"]').fadeIn();

試しに上記のように記述を変えたら.js-modalクラスのdata-idが1になっている物が表示されたので、やはり変数の記述が間違っているのかなと考えております。

jQueryのセレクタ内で変数を使用する方法を教えていただけたらと思います。

Answer 1

// $('.js-modal[data-id = "tasklist"]').fadeIn();
//                             ↓
   $( '.js-modal[data-id = "' + tasklist + '"]' ).fadeIn();

Comments

[r3333]

ありがとうございます！！無事に表示できました！
""で囲っている部分はdata-idの値を示すための物だと思うので理解できるのですが、
''で囲っている部分('+ tasklist +')はどういった意味合いの物になるのでしょうか？

[kei344]

ちがうちがう、
.js-modal[data-id = "
という文字列と
tasklist
という変数の中身と
"]
という文字列を足して
.js-modal[data-id = "中身"]
という文字列を作ってjQueryに渡しているだけです。

+は文字列連結。

【テキストを扱う — JavaScript での文字列 - ウェブ開発を学ぶ | MDN】
https://developer.mozilla.org/ja/docs/Learn/JavaScript/First_steps/Strings

[r3333]

丁寧な返信ありがとうございます！
なるほど・・・+で連結させて文字列を作っているのですね。理解できました。

+で文字列を連結させるというイメージだと、
[data-id = " + tasklist + "]
や
[data-id = " + 'tasklist' + "]
でも問題なさそうに見えるのですが、どちらも試してみるとエラーになりました。
「+ tasklist +」の部分を' 'で囲っているのはなぜなのでしょうか？
セレクタ内で変数を使う時は+を含めて' 'を使うということなのでしょうか？
（質問ばかりで申し訳ございません）

[kei344]

↓これ読んでください。

【テキストを扱う — JavaScript での文字列 - ウェブ開発を学ぶ | MDN】
https://developer.mozilla.org/ja/docs/Learn/JavaScript/First_steps/Strings

[r3333]

あ・・・すいませんなんかとんでもなく勘違いしてしまっていました。
改めて参考URL及び一個前の返信を確認したら何と何を連結させているのかを理解することができました。
丁寧に教えていただきありがとうございました。大変参考になりました！