Q&A
page_1とかpage_2がダメな気がします
エラーではないのですが、同じような記述が続いているので、
まとめられるのではないかと思い、お力を借りたいです。
現在、あるサイトを見て、このスライダーと同じようなものを作りたいと思い、
自分流でコードを書きました。（スライダーのベースは拾ってきたものです。）
動いているコードはこちらに書きました。
このサンプルでは、サムネイルをクリックするとオートプレイが開始されます。
https://jsfiddle.net/emhj4xs5/21/
スライダーの仕様は、左側に大きなメインスライダーがあって、 右側にサムネイルが並んでいます。 よくある、サムネイルのあるスライダーではなく、 メインスライダーとサムネイルの動きは続きになっていて、 メインが変わると、サムネイルの順番も変わります。 サムネイルをクリックすると、そのスライダーがメインに表示され、 サムネイルも順番が変わります。
同じ動きではないですが、何とか同じような挙動のスライダーが出来たのですが、
同じような記述が多い事に気付きました。
ただ、これをまとめて書く方法が検討が付かない為、
ヒントだけでも教えていただければと思いました。
例えばここら辺とか、変数の”page”、”page_1”、”page_2”の3つが違うだけで、他は同じだと思います。
jquery
1function thumbSlider() { 2 if(page === lastPage){ 3 page = 0; 4 changePage(); 5 }else{ 6 page ++; 7 changePage(); 8 }; 9 if (page_1 === lastPage) { 10 page_1 = 0; 11 changePage(); 12 } else { 13 page_1 ++; 14 changePage(); 15 }; 16 if (page_2 === lastPage) { 17 page_2 = 0; 18 changePage(); 19 } else { 20 page_2 ++; 21 changePage(); 22 }; 23 } 24
これを、↓このくらいの記述に出来ないかと思っています。
jquery
1function thumbSlider() { 2 //ここら辺に変数をまとめる記述を書くとか。。。 3 if(page === lastPage){ 4 page = 0; 5 changePage(); 6 }else{ 7 page ++; 8 changePage(); 9 }; 10} 11
他にも、重複しているところがあると思うので、このメソッドを調べてみてとか、
このサイトにヒントが書いてあるよとか、それだけでも結構です。
ちなみにスライダーは、wordpressなどの投稿で増やせる仕様にしたいです。
何か不足しているものなどありましたらご指摘ください。
すみませんが、よろしくお願いいたします。
回答3件
0
異なる変数を定義しているので、まとめるのは難しいです。
配列を使ってみては、どうでしょうか。
javascript
1 var pages = [1, 2, 3]; // page, page_1, page_2の代わり 2 function thumbSlider() { //サムネイルが最後のページに来た時の挙動用 3 for (var i = 0, len = pages.length; i < len; ++i) { 4 if(pages[i] === lastPage){ 5 pages[i] = 0; 6 }else{ 7 pages[i] ++; 8 } 9 } 10 changePage(); 11 }
投稿2020/12/25 09:31
総合スコア4820
evalを使えば、できるのだけど・・・やめたほうがいいです。
ありがとうございます。
私もまさに、こんな感じをイメージしていましたが、異なる変数を定義していると難しいんですね・・・
配列にするという事は、changePage()内の下記の部分も同様に、配列か何かに変える必要がありますか？
全く見当が付かず、すみません。
thumb_img1.eq(page).addClass('show');
thumb_img2.eq(page_1).addClass('show');
thumb_img3.eq(page_2).addClass('show');
はい。配列を参照するように変更してください。
同様に、backtozeroも変更する必要があります。
ありがとうございます。どうやって参照するのかもすぐに出てこずお恥ずかしいのですが、
これで何とか動きました！
backtozero()の所も同じような記述があるので短くしたいですが、
ここを短く変更するとなると、また別の所から改変していかなくてはならないと言う感じでしょうか？
function changePage(){ // サムネのクラス付け替え用
$('.thumb-item .slider-img').removeClass('show');
thumb_img1.eq(pages[0]).addClass('show');
thumb_img2.eq(pages[1]).addClass('show');
thumb_img3.eq(pages[2]).addClass('show');
};
function backtozero() { // クリックした後に何番目を表示するか
pages[0] = count + 1; // thumb1は、クリックした画像から一枚進んだ画像へ
if (pages[0] >= allImage) {
pages[0] = 0;
}
pages[1] = pages[0] + 1; //thumb2は、thumb1より1多い画像へ
if (pages[1] >= allImage) {
pages[1] = 0;
}
pages[2] = pages[1] + 1; //thumb3は、thumb2より1多い画像へ
if (pages[2] >= allImage) {
pages[2] = 0;
}
}
0
ベストアンサー
changePage()は1回でいいような気がしました。
js
1function thumbSlider() { 2 [page, page_1, page2] = [page, page_1, page2].map( x => ( x+1 ) % lastPage ); 3 changePage(); 4 }
投稿2020/12/25 08:21
総合スコア36158
ありがとうございます。
見たことない書き方なので、勉強になりますm(_ _"m)
調べてやってみようと思います。
値の範囲に、lastPageを含むので
( x+1 ) % (lastPage + 1)ですね。
ああ、たしかにおっしゃるとおりでした。
このメソッド？計算式？凄いですね。勝手に1プラスされたものに変換して出してくれる、こんな便利な式があったなんて知りませんでした。とても参考になりました！
ちなみに、このmapは、こんな時に使う的なお決まりみたいなのがあるんでしょうか？
mapメソッドについては、以下をご参照ください。
https://developer.mozilla.org/ja/docs/Web/JavaScript/Reference/Global_Objects/Array/map
代入については、以下をご参照ください。
https://developer.mozilla.org/ja/docs/Web/JavaScript/Reference/Operators/Destructuring_assignment
ありがとうございます。例えば、スライダーを作るときに多く使われるよとか、そういった例をお聞きしたかったのですが、きっと色々な使い方があって、当てはまるものを自分で選別して使うという事になると解釈しました。
今後、この書き方を思い出して、使えるときに使ってみたいと思います！
そういうことでしたか。
あらゆる場面で使いますよ。人によっては「forループ使うな。mapメソッドを使え」ぐらいな感じです。
私もmapメソッドが使える場面でforループを書く気にはあまりならないです。
すみまあせん、ありがとうございます。
そうなんですね。確かにforよりは便利なような気がしますが、( x+1 ) % (lastPage+1)みたいな計算式が苦手分野だなと思いました^^;
でも今回、mapや%の使い方を知ったので、どこかで使えたら良いなと思っています。
大変勉強になりました。ありがとうございました。
あなたの回答
tips
プレビュー
