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

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

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

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

Q&A

解決済

3回答

1855閲覧

Jqeryでクラス名にナンバリング、そのクラスを使ってスライダーを動かしたい

EmiShimizu

総合スコア9

JavaScript

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

0グッド

0クリップ

投稿2017/02/24 06:24

編集2017/02/27 02:45

8個のスライダーを同じページに表示させたいです。

Jquery

1 2$('.snapNumber1').slick({ 3 autoplay: false, 4 //autoplaySpeed: 2500, 5 speed: 800, 6 dots: true, 7 arrows: true, 8 prevArrow: $('.snapPrev1'), 9 nextArrow: $('.snapNext1'), 10 centerMode: true, 11 centerPadding: '20%' 12 }); 13 14$('.snapNumber2').slick({ 15 autoplay: false, 16 //autoplaySpeed: 2500, 17 speed: 800, 18 dots: true, 19 arrows: true, 20 prevArrow: $('.snapPrev2'), 21 nextArrow: $('.snapNext2'), 22 centerMode: true, 23 centerPadding: '20%' 24 }); 25 26$('.snapNumber3').slick({ 27 autoplay: false, 28 //autoplaySpeed: 2500, 29 speed: 800, 30 dots: true, 31 arrows: true, 32 prevArrow: $('.snapPrev3'), 33 nextArrow: $('.snapNext3'), 34 centerMode: true, 35 centerPadding: '20%' 36 }); 37 38$('.snapNumber4').slick({ 39 autoplay: false, 40 //autoplaySpeed: 2500, 41 speed: 800, 42 dots: true, 43 arrows: true, 44 prevArrow: $('.snapPrev4'), 45 nextArrow: $('.snapNext4'), 46 centerMode: true, 47 centerPadding: '20%' 48 }); 49 50$('.snapNumber5').slick({ 51 autoplay: false, 52 //autoplaySpeed: 2500, 53 speed: 800, 54 dots: true, 55 arrows: true, 56 prevArrow: $('.snapPrev5'), 57 nextArrow: $('.snapNext5'), 58 centerMode: true, 59 centerPadding: '20%' 60 });




と書いてもいいのですが、もっとスマートに書きたいです。

jqery

1$('.snapNumber').each(function(i){ 2 $(this).attr('class','snapNumber' + (i+1)); 3 $('.snapNumber()').slick({ 4 autoplay: false, 5 //autoplaySpeed: 2500, 6 speed: 800, 7 dots: true, 8 arrows: true, 9 prevArrow: $('.snapPrev()'), 10 nextArrow: $('.snapNext()'), 11 centerMode: true, 12 centerPadding: '20%' 13 }); 14 }); 15

このような感じで書きたいのですが、どうやったら動こくように書けるのでしょうか?
よろしくお願いします。
htmlを追加しました。

html

1<div class="snapSlider"> 2 <div class="snapPrev"></div> 3 <div class="slider snapNumber"> 4 <div><a href="#"><img src="/test/img/snap/01/s01_03.jpg"></a></div> 5 <div><a href="#"><img src="/test/img/snap/01/s01_03.jpg"></a></div> 6 <div><a href="#"><img src="/test/img/snap/01/s01_03.jpg"></a></div> 7 <div><a href="#"><img src="/test/img/snap/01/s01_03.jpg"></a></div> 8 <div><a href="#"><img src="/test/img/snap/01/s01_03.jpg"></a></div> 9 </div> 10 <div class="snapNext"></div> 11 </div> 12 13 <div class="snapSlider"> 14 <div class="snapPrev"></div> 15 <div class="slider snapNumber"> 16 <div><a href="#"><img src="/test/img/snap/01/s01_03.jpg"></a></div> 17 <div><a href="#"><img src="/test/img/snap/01/s01_03.jpg"></a></div> 18 <div><a href="#"><img src="/test/img/snap/01/s01_03.jpg"></a></div> 19 <div><a href="#"><img src="/test/img/snap/01/s01_03.jpg"></a></div> 20 <div><a href="#"><img src="/test/img/snap/01/s01_03.jpg"></a></div> 21 </div> 22 <div class="snapNext"></div> 23 </div> 24

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

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

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

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

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

kei344

2017/02/24 08:01

質問文のコードはコードブロックで囲んでいただけませんか? ```(バッククオート3つ)で囲み、前後に改行をいれるか、コードを選択して「<code>」ボタンを押すとコードブロックになります。
EmiShimizu

2017/02/27 02:19

すみません。修正いたしました!ご指摘ありがとうございます。
kei344

2017/02/27 02:28

コードブロックは複数設置可能です。基本的にコードは全てコードブロックに入れたほうが良いです。
kei344

2017/02/27 02:40

.snapNumber と .snapPrev の位置関係はどうなっていますか?1組でよいのでHTMLも追記ください。
guest

回答3

0

ベストアンサー

JavaScript

1$( function() { 2 $( '.snapSlider' ).each( function( i ) { 3 var $_ = $( this ); 4 $( '.snapNumber', $_ ).slick( { 5 autoplay: false 6 // , autoplaySpeed: 2500 7 , speed: 800 8 , dots: true 9 , arrows: true 10 , prevArrow: $( '.snapPrev', $_ ) 11 , nextArrow: $( '.snapNext', $_) 12 , centerMode: true 13 , centerPadding: '20%' 14 } ); 15 } ); 16} ); 17```**動くサンプル:**[https://jsfiddle.net/txsj1oxf/](https://jsfiddle.net/txsj1oxf/)

投稿2017/02/27 05:52

kei344

総合スコア69364

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

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

EmiShimizu

2017/02/27 06:28

uwawaaaaaaa! 動きました!!!ありがとうございます!
EmiShimizu

2017/02/27 06:35

このような書き方があるんですね!!勉強になりました。
guest

0

javascript

1for(var i = 1; i <= 5; i++) { 2 $('.snapNumber' + i).attr().slick(); 3}

とか

javascript

1[1,2,3,4,5].forEach(function(i) { 2 $('.snapNumber' + i).attr().slick(); 3});

等の方法もありますが、各snapNumberにスタイルを分けているからsnapNumber1, snapNumber2 ... としているというのでなければ、全部snapNumberというクラス名に変更するか、またはもう一つsnapNumberというクラスをつければ

javascript

1$('.snapNumber').each(...);

でできるのではないでしょうか。

投稿2017/02/24 06:56

編集2017/02/27 02:49
turbgraphics200

総合スコア4267

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

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

EmiShimizu

2017/02/24 07:30

ご回答ありがとうございます! 【組み合わせ1】snapNumber(1)・snapPrev(1)・snapNext(1) 【組み合わせ2】snapNumber(2)・snapPrev(2)・snapNext(2) 【組み合わせ3】snapNumber(3)・snapPrev(3)・snapNext(3) ・ ・ ・ というようにしなければうまく動きません! 説明不足ですみません。
guest

0

javascript

1$('.snapNumber').each(function(i){ 2 $(this).attr('class','snapNumber' + (i+1)); 3 $('.snapNumber'+i).slick({ 4 autoplay: false, 5 //autoplaySpeed: 2500, 6 speed: 800, 7 dots: true, 8 arrows: true, 9 prevArrow: $('.snapPrev'+i), 10 nextArrow: $('.snapNext'+i), 11 centerMode: true, 12 centerPadding: '20%' 13 }); 14});

これではだめです?

投稿2017/02/24 07:50

yohe32

総合スコア76

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

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

EmiShimizu

2017/02/27 02:16

連絡が遅くなって、大変申し訳ございません!! ご回答ありがとうございました。 そちらでは動きませんでした(涙)!!
guest

あなたの回答

tips

太字

斜体

打ち消し線

見出し

引用テキストの挿入

コードの挿入

リンクの挿入

リストの挿入

番号リストの挿入

表の挿入

水平線の挿入

プレビュー

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

ただいまの回答率
85.50%

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

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

質問する

関連した質問