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

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

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

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

Q&A

解決済

2回答

9132閲覧

classListがうまくいきません。。。

退会済みユーザー

退会済みユーザー

総合スコア0

JavaScript

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

0グッド

0クリップ

投稿2018/06/26 10:50

編集2018/06/26 11:14

Swiperを用いて写真のスライドショーを作ろうとしています。

切り替わりのアニメーションが終了したときに表示中のスライドにクラスを付けたいのですが
javascriptでエラーが出て前に進めません。classListの使い方が悪いとおもうのですが知識が浅く分かりません、、、どう直したらよいのか。。。どうか教えてください。

html

1<div class="swiper-container"> 2 3<div class="swiper-wrapper"> 4<div class="swiper-slide">Slide 1</div> 5<div class="swiper-slide">Slide 2</div> 6<div class="swiper-slide">Slide 3</div> 7</div> 8 9</div>

javascript

1var mySwiper = new Swiper ('.swiper-container', { 2 autoplay: { 3 delay: 9000, 4 disableOnInteraction: false, 5 }, 6 }) 7 8 mySwiper.on('slideChangeTransitionEnd', function () { 9 // this キーワードで、対象のswiperインスタンスにアクセス可能 10 this.classList.add("test"); 11 console.log('transition end : active is ' + this.activeIndex); 12});

エラーは下記の通りです。
TypeError:Cannot read property 'add' of indefined
なんでclassList.addでエラーがでているのかわかりません・・・

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

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

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

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

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

guest

回答2

0

イベントコールバック関数内の this キーワードはコメントにも書かれているように** Swiper インスタンスであって DOM 要素ではない**ので、classList はプロパティに存在しません。
Swiper インスタンスのプロパティ・メソッドは下記を参照。

これによると

$el がコンテナ、 $wrapperEl がラッパーなどと書かれているので、

javascript

1this.$el.classList.add('test');

のように記述してみましょう。

投稿2018/06/26 12:12

yhg

総合スコア2161

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

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

退会済みユーザー

退会済みユーザー

2018/06/27 05:09

ご回答ありがとうございます! しかしながら。。。御伺した内容で修正してみたのですが、エラーは変わらず同じ内容でした、、どうしようも頭を抱え、 いろいろ試行錯誤した結果、ClassListを使う方法はあきらめ、他の方法を試みたところなんとかクラスをつけることができました。(自己解決参照) インスタンスもDOMもぜんぜん理解できていないことを改めてわかりました、、、勉強がんばります。ありがとうございました。
guest

0

ベストアンサー

目的はアクティブになっているスライドにクラスを付けることだったので、classListを使う方法は諦め、JqueryのaddClassを使って、なんやかんやでなんとかクラスを付けることができました。(かなりむりやりですが・・・泣)
アドバイス下さったyhg様ありがとうございます。
Javascriptがんばって勉強します。( ..)φ

html

1<div class="swiper-container"> 2 3<div class="swiper-wrapper"> 4<div class="swiper-slide swiper-slide-1">Slide 1</div> 5<div class="swiper-slide swiper-slide-2">Slide 2</div> 6<div class="swiper-slide swiper-slide-3">Slide 3</div> 7</div> 8 9</div>
var mySwiper = new Swiper ('.swiper-container', { loop: true, effect: 'fade', speed:3000, centeredSlides: true, autoplay: { delay: 8000, disableOnInteraction: false, }, on: { slideChangeTransitionEnd: function () { jQuery('swiper-slide').removeClass('test'); realIndex = this.realIndex + 1; jQuery('swiper-slide-' + realIndex).addClass('test'); }, }, });

投稿2018/06/27 05:21

退会済みユーザー

退会済みユーザー

総合スコア0

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

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

あなたの回答

tips

太字

斜体

打ち消し線

見出し

引用テキストの挿入

コードの挿入

リンクの挿入

リストの挿入

番号リストの挿入

表の挿入

水平線の挿入

プレビュー

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

ただいまの回答率
85.50%

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

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

質問する

関連した質問