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

Question

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

$(function() {
    var slider = {};
    var thumbnailItem = {};
    var classLength = $(".slide-box").length;

    for (var i = 0; classLength > i; i++) {
        newClassMain = "main" + i;
        newClassThumbnail = "thumbnail" + i;
        slider[i] = "." + newClassMain;
        thumbnailItem[i] = "." + newClassThumbnail + " " + "li";

    	$(slider[i]).on("init", function(slick) {
        var index = $(".slide-item.slick-slide.slick-current").attr(
          "data-slick-index"
        );
        $(thumbnailItem[i] + '[data-index="' + index + '"]').addClass(
          "thumbnail-current"
        );

        console.log(slider[i]); //.main0 .main1 とclassLengthの数だけ返します。
    }
    console.log(slider[i]); //forの外なのでundefineがでます。
}

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

【追記】やりたいこと

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

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

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

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

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

  $(function() {
    // slide（サムネイルつき）---------------------
    // 参考サイト：https://takblog.site/web/?p=144

    //【追加】スライドの数を数え、その数だけ個別のクラスを付与する
    var classLength = $(".slide-box").length;
    var newClassMain, newClassThumbnail, slider, thumbnailItem;
    //【追加】サムネイル画像アイテムに data-index　でindex番号を付与
    for (var i = 0; classLength > i; i++) {
      newClassMain = "main" + i;
      newClassThumbnail = "thumbnail" + i;
      slider = "." + newClassMain;
      thumbnailItem = "." + newClassThumbnail + " " + "li";
      $(".slide-main")
        .eq(i)
        .addClass(newClassMain);
      $(".slide-thumbnail")
        .eq(i)
        .addClass(newClassThumbnail);
      //サムネイル画像アイテムに data-index　でindex番号を付与
      $(thumbnailItem).each(function() {
        var index = $(thumbnailItem).index(this);
        $(this).attr("data-index", index);
      });
      //スライダー初期化後、カレントのサムネイル画像にクラス「thumbnail-current」を付ける
      //「slickスライダー作成」の前にこの記述は書いてください。
      $(slider).on("init", function(slick) {
        var index = $(".slide-item.slick-slide.slick-current").attr(
          "data-slick-index"
        );
        $(thumbnailItem + '[data-index="' + index + '"]').addClass(
          "thumbnail-current"
        );
      });
      //slickスライダー初期化
      $(slider).slick({
        arrows: true,
        dots: true,
        fade: true,
        infinite: false //これは必須
      });
      //サムネイル画像アイテムをクリックした時にスライダー切り替え
      $(thumbnailItem).on("click", function() {
        var index = $(this).attr("data-index");
        $(slider).slick("slickGoTo", index, false);
      });
      //サムネイル画像のカレントを切り替え
      $(slider).on("beforeChange", function(
        event,
        slick,
        currentSlide,
        nextSlide
      ) {
        $(thumbnailItem).each(function() {
          $(this).removeClass("thumbnail-current");
        });
        $(thumbnailItem + '[data-index="' + nextSlide + '"]').addClass(
          "thumbnail-current"
        );
      });
    }
  }

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

<!--1つのスライド-->
<div class="slide-box">
  <!--メインスライド-->
  <ul class="slide-main">
    <li>1</li>
    <li>2</li>
    <li>3</li>
    <li>4</li>
    <li>5</li>
  </ul>
  <!--/メインスライド-->
  <!--サムネイルスライド-->
  <ul class="slide-thumbnail">
    <li>1</li>
    <li>2</li>
    <li>3</li>
    <li>4</li>
    <li>5</li>
  </ul>
  <!--/サムネイルスライド-->
</div>
<!--/1つのスライド-->

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

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

Comments

[y_waiwai]

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

[navbisuu]

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

[think49]

> sliderをslider[i]と書いてみましたが、うまくいきませんでした。。

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

[maisumakun]

> （console.log(slider[i]);で確認したところ、中身は入っているようです。）

肝心の、中身を入れるところを省略してしまっていませんか？

[navbisuu]

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

[maisumakun]

> slider0,slider1のように、名前を変更したいです。

その名前で実行しないといけない理由があるのでしょうか？それとも、単に「複数を処理したい」だけでしょうか？

[navbisuu]

実は、別のページで質問している内容になるのですが、
slickスライダーを
htmlの部分を複製し、2つ以上スライドを作成しても動作するようにしたいです。
(これが別の質問ページになります。
　こちらに詳細なコードを記載しています。
　https://teratail.com/questions/298665）

javascriptの記述をスライダーの数だけ手動で複製し、
その後、スライダーの部分を、
　var slider = ".main0";
　var slider1 = ".main1";
のように、変数と中に入れるクラス名を手動で変更したら、うまく起動しました。
これをfor文で動的に複製するようにしたいです。

[think49]

> https://teratail.com/questions/298665)

存在しないようですが…。

[think49]

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

[navbisuu]

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

Answer 1

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

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

Re: navbisuu さん

Comments

[navbisuu]

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

関数スコープやletの意味がよくわかっていなかったので、
この機会に学ぶことができました。
data-*属性での束縛も検討したのですが、自分の力ではできなかったので、またの機会に挑戦したいと思います。
後で、解決方法の詳細を追記しておきます。
本当にありがとうございました！！！

Answer 2

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

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

$(function() {
    // slide（サムネイルつき）---------------------
    // 参考サイト：https://takblog.site/web/?p=144

    // スライドの数を数え、その数だけ個別のクラスを付与する
    var classLength = $(".slide-box").length;
    var newClassMain, newClassThumbnail;
    var slider = {};
    var thumbnailItem = {};
    // サムネイル画像アイテムに data-index　でindex番号を付与
    for (let i = 0; classLength > i; i++) {
      newClassMain = "main" + i;
      newClassThumbnail = "thumbnail" + i;
      slider[i] = "." + newClassMain;
      thumbnailItem[i] = "." + newClassThumbnail + " " + "li";
      $(".slide-main")
        .eq(i)
        .addClass(newClassMain);
      $(".slide-thumbnail")
        .eq(i)
        .addClass(newClassThumbnail);
      //サムネイル画像アイテムに data-index　でindex番号を付与
      $(thumbnailItem[i]).each(function() {
        var index = $(thumbnailItem[i]).index(this);
        $(this).attr("data-index", index);
      });
      //スライダー初期化後、カレントのサムネイル画像にクラス「thumbnail-current」を付ける
      //「slickスライダー作成」の前にこの記述は書いてください。
      $(slider[i]).on("init", function(slick) {
        var index = $(".slide-item.slick-slide.slick-current").attr(
          "data-slick-index"
        );
        $(thumbnailItem[i] + '[data-index="' + index + '"]').addClass(
          "thumbnail-current"
        );
      });
      //slickスライダー初期化
      $(slider[i]).slick({
        arrows: true,
        dots: true,
        fade: true,
        infinite: false //これは必須
      });
      //サムネイル画像アイテムをクリックした時にスライダー切り替え
      $(thumbnailItem[i]).on("click", function() {
        var index = $(this).attr("data-index");
        $(slider[i]).slick("slickGoTo", index, false);
      });
      //サムネイル画像のカレントを切り替え
      $(slider[i]).on("beforeChange", function(
        event,
        slick,
        currentSlide,
        nextSlide
      ) {
        $(thumbnailItem[i]).each(function() {
          $(this).removeClass("thumbnail-current");
        });
        $(thumbnailItem[i] + '[data-index="' + nextSlide + '"]').addClass(
          "thumbnail-current"
        );
      });
    }
}

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

本当にありがとうございました！！！