for文を使用する時、変数の名前を動的に変更したい。

for文を使用する時、変数の名前を動的に変更したいです。
下記のように、sliderをslider[i]と書いてみましたが、
この場合、javascriptがうまく作動しません。
slider0,slider1のように別の変数として扱われるようにしたいです。
下のjavascriptの記述は省略して書いていますので、参考程度にしてください。
（console.log(slider[i]);で確認したところ、中身は入っているようです。）

javascript
1$(function() {
2    var slider = {};
3    var thumbnailItem = {};
4    var classLength = $(".slide-box").length;
5
6    for (var i = 0; classLength > i; i++) {
7        newClassMain = "main" + i;
8        newClassThumbnail = "thumbnail" + i;
9        slider[i] = "." + newClassMain;
10        thumbnailItem[i] = "." + newClassThumbnail + " " + "li";
11
12    	$(slider[i]).on("init", function(slick) {
13        var index = $(".slide-item.slick-slide.slick-current").attr(
14          "data-slick-index"
15        );
16        $(thumbnailItem[i] + '[data-index="' + index + '"]').addClass(
17          "thumbnail-current"
18        );
19
20        console.log(slider[i]); //.main0 .main1 とclassLengthの数だけ返します。
21    }
22    console.log(slider[i]); //forの外なのでundefineがでます。
23}

こちらを参考にしております。
https://teratail.com/questions/68851
evalの使い方も今一つつかめていません。
説明が下手ですみません。ご教示よろしくお願い申し上げます。

【追記】やりたいこと

別の質問ページhttps://teratail.com/questions/298665の内容になるのですが、
slickスライドで
スライドとサムネイルのクラス名が同じだと、
複数増やした状態で、サムネイルをクリックしたら、同時にスライドが動いてしまうことに気付きました。。。
なので、スライドとサムネイルのクラス名を変更する方法で実装を考え直しています。

そこで、javascriptの記述をスライダーの数だけ複製し、
スライダーとサムネイル画像の部分を、
下記のように、変数と中に入れるクラス名を手動で変更したら、うまく起動しました。

javascript
1    var slider = ".main0"; //スライダー
2    var thumbnailItem = ".slide-thumbnail0 li"; //サムネイル画像

javascript
1    var slider1 = ".main1"; //スライダー
2    var thumbnailItem1 = ".slide-thumbnail1 li"; //サムネイル画像

これをfor文を使って動的に変数とクラスの番号を変更したいのですが、うまくいきません。。。
下記のように、クラスの番号を動的に変更するようにしたのですが、
スライドが複数ある場合、
どのサムネイルをクリックしても、一番下のスライドが反応してしまいます。

javascript
1  $(function() {
2    // slide（サムネイルつき）---------------------
3    // 参考サイト：https://takblog.site/web/?p=144
4
5    //【追加】スライドの数を数え、その数だけ個別のクラスを付与する
6    var classLength = $(".slide-box").length;
7    var newClassMain, newClassThumbnail, slider, thumbnailItem;
8    //【追加】サムネイル画像アイテムに data-index　でindex番号を付与
9    for (var i = 0; classLength > i; i++) {
10      newClassMain = "main" + i;
11      newClassThumbnail = "thumbnail" + i;
12      slider = "." + newClassMain;
13      thumbnailItem = "." + newClassThumbnail + " " + "li";
14      $(".slide-main")
15        .eq(i)
16        .addClass(newClassMain);
17      $(".slide-thumbnail")
18        .eq(i)
19        .addClass(newClassThumbnail);
20      //サムネイル画像アイテムに data-index　でindex番号を付与
21      $(thumbnailItem).each(function() {
22        var index = $(thumbnailItem).index(this);
23        $(this).attr("data-index", index);
24      });
25      //スライダー初期化後、カレントのサムネイル画像にクラス「thumbnail-current」を付ける
26      //「slickスライダー作成」の前にこの記述は書いてください。
27      $(slider).on("init", function(slick) {
28        var index = $(".slide-item.slick-slide.slick-current").attr(
29          "data-slick-index"
30        );
31        $(thumbnailItem + '[data-index="' + index + '"]').addClass(
32          "thumbnail-current"
33        );
34      });
35      //slickスライダー初期化
36      $(slider).slick({
37        arrows: true,
38        dots: true,
39        fade: true,
40        infinite: false //これは必須
41      });
42      //サムネイル画像アイテムをクリックした時にスライダー切り替え
43      $(thumbnailItem).on("click", function() {
44        var index = $(this).attr("data-index");
45        $(slider).slick("slickGoTo", index, false);
46      });
47      //サムネイル画像のカレントを切り替え
48      $(slider).on("beforeChange", function(
49        event,
50        slick,
51        currentSlide,
52        nextSlide
53      ) {
54        $(thumbnailItem).each(function() {
55          $(this).removeClass("thumbnail-current");
56        });
57        $(thumbnailItem + '[data-index="' + nextSlide + '"]').addClass(
58          "thumbnail-current"
59        );
60      });
61    }
62  }

htmlの記述はこうなります。htmlはこのまま複製しても使えるようにしたいです。

html
1<!--1つのスライド-->
2<div class="slide-box">
3  <!--メインスライド-->
4  <ul class="slide-main">
5    <li>1</li>
6    <li>2</li>
7    <li>3</li>
8    <li>4</li>
9    <li>5</li>
10  </ul>
11  <!--/メインスライド-->
12  <!--サムネイルスライド-->
13  <ul class="slide-thumbnail">
14    <li>1</li>
15    <li>2</li>
16    <li>3</li>
17    <li>4</li>
18    <li>5</li>
19  </ul>
20  <!--/サムネイルスライド-->
21</div>
22<!--/1つのスライド-->

以上を試してみて、変数名も変更する必要があると考えています。
しかし、slider[i],thumbnailItem[i] ではうまくいきませんでした。。

長文で申し訳ありません。
どうかお力をお借りできれば嬉しいです。
よろしくお願い申し上げます。

y_waiwai

2020/10/18 10:05

どういうふうにうまくいかないんでしょうか

navbisuu

2020/10/18 10:13 編集

うまく説明できているか不安ですが、 sliderをslider[i]と書くと、javascriptがうまく作動しません。 slider0,slider1のように別の変数として扱われるようにしたいです。下のjavascriptの記述は省略して書いていますので、参考程度にしてください。（console.log(slider[i]);で確認したところ、中身は入っているようです。）

think49

2020/10/18 10:14

> sliderをslider[i]と書いてみましたが、うまくいきませんでした。。「slider[i]に何も値が入ってない」ので当然動きませんね。 undefined要素があれば動きはしますが…。

maisumakun

2020/10/18 10:16

> （console.log(slider[i]);で確認したところ、中身は入っているようです。）肝心の、中身を入れるところを省略してしまっていませんか？

navbisuu

2020/10/18 10:17

コメントありがとうございます。 slider0,slider1のように、名前を変更したいです。

maisumakun

2020/10/18 10:23

> slider0,slider1のように、名前を変更したいです。その名前で実行しないといけない理由があるのでしょうか？それとも、単に「複数を処理したい」だけでしょうか？

navbisuu

2020/10/18 10:35 編集

実は、別のページで質問している内容になるのですが、 slickスライダーを htmlの部分を複製し、2つ以上スライドを作成しても動作するようにしたいです。 (これが別の質問ページになります。　こちらに詳細なコードを記載しています。　https://teratail.com/questions/298665） javascriptの記述をスライダーの数だけ手動で複製し、その後、スライダーの部分を、　var slider = ".main0"; 　var slider1 = ".main1"; のように、変数と中に入れるクラス名を手動で変更したら、うまく起動しました。これをfor文で動的に複製するようにしたいです。

think49

2020/10/18 10:35 編集

> https://teratail.com/questions/298665) 存在しないようですが…。

think49

2020/10/18 10:36

https://teratail.com/questions/298665 ")" を取り除く必要があるようですね。

navbisuu

2020/10/18 10:36

申し訳ないです、)が邪魔してページ遷移しませんでした。 https://teratail.com/questions/298665

行動規範の内容に同意します

回答2件

ベストアンサー

slider[i] の変数iが関数スコープでおり、変数iを束縛してないことに起因する問題に読めます。
let にしても良いですが、せっかく、data-*属性を使用しているので、別の手段で束縛する事を検討しても良いと思います。

JavaScript - 関数の呼び出し時に、対象の要素だけを変更することはできるのでしょうか？｜teratail

Re: navbisuu さん

投稿2020/10/18 10:32

think49

総合スコア18189

navbisuu

2020/10/19 01:55

think49様ご教示ありがとうございました！ for内に書いているiをvar → letに変更しし、 slider → slider[i], thumbnailItem → thumbnailItem[i] に書き直したら、 htmlのスライド・サムネイル部分を複製しても、各スライドとサムネイルどうしで連動するようになりました！関数スコープやletの意味がよくわかっていなかったので、この機会に学ぶことができました。 data-*属性での束縛も検討したのですが、自分の力ではできなかったので、またの機会に挑戦したいと思います。後で、解決方法の詳細を追記しておきます。本当にありがとうございました！！！

行動規範の内容に同意します

###解決方法
think49様のご教示のように、
for内に書いているiをvar → letに変更し、
slider → slider[i],
thumbnailItem → thumbnailItem[i]
に書き直したら、
htmlのスライド・サムネイル部分を複製しても、
各スライドとサムネイルどうしで連動するようになりました！

解決したjavascriptの記述を下に書いておきます。

javascript
1$(function() {
2    // slide（サムネイルつき）---------------------
3    // 参考サイト：https://takblog.site/web/?p=144
4
5    // スライドの数を数え、その数だけ個別のクラスを付与する
6    var classLength = $(".slide-box").length;
7    var newClassMain, newClassThumbnail;
8    var slider = {};
9    var thumbnailItem = {};
10    // サムネイル画像アイテムに data-index　でindex番号を付与
11    for (let i = 0; classLength > i; i++) {
12      newClassMain = "main" + i;
13      newClassThumbnail = "thumbnail" + i;
14      slider[i] = "." + newClassMain;
15      thumbnailItem[i] = "." + newClassThumbnail + " " + "li";
16      $(".slide-main")
17        .eq(i)
18        .addClass(newClassMain);
19      $(".slide-thumbnail")
20        .eq(i)
21        .addClass(newClassThumbnail);
22      //サムネイル画像アイテムに data-index　でindex番号を付与
23      $(thumbnailItem[i]).each(function() {
24        var index = $(thumbnailItem[i]).index(this);
25        $(this).attr("data-index", index);
26      });
27      //スライダー初期化後、カレントのサムネイル画像にクラス「thumbnail-current」を付ける
28      //「slickスライダー作成」の前にこの記述は書いてください。
29      $(slider[i]).on("init", function(slick) {
30        var index = $(".slide-item.slick-slide.slick-current").attr(
31          "data-slick-index"
32        );
33        $(thumbnailItem[i] + '[data-index="' + index + '"]').addClass(
34          "thumbnail-current"
35        );
36      });
37      //slickスライダー初期化
38      $(slider[i]).slick({
39        arrows: true,
40        dots: true,
41        fade: true,
42        infinite: false //これは必須
43      });
44      //サムネイル画像アイテムをクリックした時にスライダー切り替え
45      $(thumbnailItem[i]).on("click", function() {
46        var index = $(this).attr("data-index");
47        $(slider[i]).slick("slickGoTo", index, false);
48      });
49      //サムネイル画像のカレントを切り替え
50      $(slider[i]).on("beforeChange", function(
51        event,
52        slick,
53        currentSlide,
54        nextSlide
55      ) {
56        $(thumbnailItem[i]).each(function() {
57          $(this).removeClass("thumbnail-current");
58        });
59        $(thumbnailItem[i] + '[data-index="' + nextSlide + '"]').addClass(
60          "thumbnail-current"
61        );
62      });
63    }
64}

関数スコープやletの意味がよくわかっていなかったので、
この機会に学ぶことができました。
参考にしたサイト様も載せておきます。
＜関数スコープ＞
・JavaScript中級者への道【3. 関数スコープ】
＜var,letについて＞
・JavaScriptで書く「var,let,const」の違いと使い分け方法
・letリファレンス