質問をすることでしか得られない、回答やアドバイスがある。

15分調べてもわからないことは、質問しよう!

新規登録して質問してみよう
ただいま回答率
85.35%
JavaScript

JavaScriptは、プログラミング言語のひとつです。ネットスケープコミュニケーションズで開発されました。 開発当初はLiveScriptと呼ばれていましたが、業務提携していたサン・マイクロシステムズが開発したJavaが脚光を浴びていたことから、JavaScriptと改名されました。 動きのあるWebページを作ることを目的に開発されたもので、主要なWebブラウザのほとんどに搭載されています。

jQuery

jQueryは、JavaScriptライブラリのひとつです。 簡単な記述で、JavaScriptコードを実行できるように設計されています。 2006年1月に、ジョン・レシグが発表しました。 jQueryは独特の記述法を用いており、機能のほとんどは「$関数」や「jQueryオブジェクト」のメソッドとして定義されています。

Q&A

解決済

2回答

3106閲覧

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

navbisuu

総合スコア2

JavaScript

JavaScriptは、プログラミング言語のひとつです。ネットスケープコミュニケーションズで開発されました。 開発当初はLiveScriptと呼ばれていましたが、業務提携していたサン・マイクロシステムズが開発したJavaが脚光を浴びていたことから、JavaScriptと改名されました。 動きのあるWebページを作ることを目的に開発されたもので、主要なWebブラウザのほとんどに搭載されています。

jQuery

jQueryは、JavaScriptライブラリのひとつです。 簡単な記述で、JavaScriptコードを実行できるように設計されています。 2006年1月に、ジョン・レシグが発表しました。 jQueryは独特の記述法を用いており、機能のほとんどは「$関数」や「jQueryオブジェクト」のメソッドとして定義されています。

0グッド

0クリップ

投稿2020/10/18 10:03

編集2020/10/19 02:25

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

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

気になる質問をクリップする

クリップした質問は、後からいつでもMYページで確認できます。

またクリップした質問に回答があった際、通知やメールを受け取ることができます。

バッドをするには、ログインかつ

こちらの条件を満たす必要があります。

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文で動的に複製するようにしたいです。
guest

回答2

0

ベストアンサー

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

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-*属性での束縛も検討したのですが、自分の力ではできなかったので、またの機会に挑戦したいと思います。 後で、解決方法の詳細を追記しておきます。 本当にありがとうございました!!!
guest

0

###解決方法
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リファレンス

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

投稿2020/10/19 02:08

編集2020/10/19 02:27
navbisuu

総合スコア2

バッドをするには、ログインかつ

こちらの条件を満たす必要があります。

あなたの回答

tips

太字

斜体

打ち消し線

見出し

引用テキストの挿入

コードの挿入

リンクの挿入

リストの挿入

番号リストの挿入

表の挿入

水平線の挿入

プレビュー

15分調べてもわからないことは
teratailで質問しよう!

ただいまの回答率
85.35%

質問をまとめることで
思考を整理して素早く解決

テンプレート機能で
簡単に質問をまとめる

質問する

関連した質問