0

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] ではうまくいきませんでした。。

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

4
  • どういうふうに、うまくいかないんでしょうか
    – y_waiwai
    Commented 2020年10月18日 10:04
  • コメントありがとうございます。追記しましたので、ご高覧いただけると有難いです。
    – nabiseur
    Commented 2020年10月18日 11:38
  • 1
    変数の名前を変える事はできません。変えてしまうと、それまでのプログラムと動作が変わってしまうからです。 配列を作って、その各要素に値を保持するのが良いのではないでしょうか?
    – Fumu 7
    Commented 2020年10月18日 12:25
  • コメントありがとうございます! 実は、別の質問で解決したので共有いたしますね。 for内に書いているiをvar → letに変更し、 slider → slider[i], thumbnailItem → thumbnailItem[i] に書き直したら、 htmlのスライド・サムネイル部分を複製しても、 各スライドとサムネイルどうしで連動するようになりました。 詳細な解答も追記したので、お時間ある際にご高覧いただけると幸いです。
    – nabiseur
    Commented 2020年10月19日 2:34

2 件の回答 2

0

ループでコールバック関数を作るとループ変数の値ではなくて変数自体がキャプチャされるので、コールバックが呼ばれるタイミングでの変数の値が使われます。質問のようなイベントハンドラの場合、ループ終了後なのでループ変数はループ終了時の値(質問の例だとi == classLength)になります。

for (var i = 0; i < 10; i++) {
  setTimeout(()=>console.log(i), 10);
}

対策としては例えば次のような方法があります。

ES6以降が使える場合は、letでスコープをループ内のブロックに限定する。

for (var i = 0; i < 10; i++) {
  let j = i;
  setTimeout(()=>console.log(j), 10);
}

または

for (let i = 0; i < 10; i++) {
  setTimeout(()=>console.log(i), 10);
}

ES5までの環境では無名関数を使う。

for (var i = 0; i < 10; i++) {
  (function(j) {
    setTimeout(()=>console.log(j), 10);
  })(i);
}
1
  • ご教示ありがとうございます。iをletで宣言して、スコープをループ内のブロックに限定することで解決できました! そして、ESごとでの解決方法も記載いただきありがとうございます。
    – nabiseur
    Commented 2020年10月19日 2:38
0

解決方法
別の質問ページで解決しました。https://teratail.com/questions/298792

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リファレンス

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

この質問に回答するには、ログインする必要があります。

求めていた回答ではありませんか? のタグが付いた他の質問を参照する。