addClass()内の文字列の一部を数値に変えたい。

Question

javascriptを用いた機能実装を行なっています。
下記のコードに、数値iをaddClass内で定義していますが、''内のコードは文字列に変換されるため、この結果を反映しても${i}のまま検出されてしまいます。
どうすれば、addClass内のiを数値に変えることが出来るか、些細な質問ですが、ご教授お願いします。

該当のソースコード

$(".sell-upload-drop-box").change(function(e){
  i = 1; i < 5; i++;
  $(this).addClass('have-item-${i}');
  $(".sell-upload-items").addClass('have-item-${i}');

Comments

[m.ts10806]

+で連結するとかそういう話ではないのでしょうか？

[hiromats]

+で連結するというのは、('have-item-' + ${i})という感じでですかね？　これではエラー起きてしまって駄目でしたね。

[m.ts10806]

${}要らないかと。

[hiromats]

それは試しました。あと、他の方が解答してくださったように、バッククォートの中で数値に変えたいときに${}がないと、数値に変換されなかったので、${}がないと駄目ですね。

[m.ts10806]

どんな環境なんでしょうか、 ('have-item-' + i)

[hiromats]

('have-item-' + ${i})の中での${}がいらないという意味でしたか。その条件でやったら上手くいきました。意味をちゃんと捉えられず申し訳ありません。

[m.ts10806]

なるほどそういうことですね。テンプレートリテラルが使いたいならそう書いた方が良いかもしれません。変数は基本的に宣言したままの状態で使うのが基本です。もちろんヒアドキュメントやテンプレートリテラルを使う場合はこの限りではありませんが。

[hiromats]

特にテンプレートリテラルを使いたいという訳ではなかったのですが、過去に書いたコードに似たような書き方をしていたので、それに従って使っていただけですね。今回もわざわざ詳しい解説をしていただいてありがとうございます。

Answer 1

こんにちは

ご質問に挙げられているコードでは、以下

修正前：

'have-item-${i}'

のように、シングルクォーテーション( ' )で囲っていますが、 これをバッククォート( ` )で囲んで

修正後：

`have-item-${i}`

のように修正してみるといかがでしょうか？

• 参考： MDN テンプレート文字列

Comments

[hiromats]

バッククォートに変更したらいけました！　ありがとうございます！！

[jun68ykt]

解決したようですね、よかったです！????