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

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

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

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

Q&A

解決済

2回答

666閲覧

JavaScript クラス構文

Ryu__ta

総合スコア15

JavaScript

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

0グッド

0クリップ

投稿2019/11/15 04:09

編集2019/11/15 07:13

JavaScript class構文

class構文の練習しているのですが、どこが問題なのかわからず...
nect,prevのボタンを押すと画像が切り替わる処理です。

⇒ handleEventでのthisの参照先変更

発生している問題・エラーメッセージ

Uncaught TypeError: this.next is not a function

該当のソースコード

<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <meta http-equiv="X-UA-Compatible" content="ie=edge"> <title>Document</title> <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script> </head> <body> <style> * { margin: 0; padding: 0; } .wrapper { width: 350px; } .button_area { background-color: #000; height: 100px; display: flex; justify-content: center; } .button_area div { align-self: center; } .button_area div + div { margin-left: 20px; } .image_wrapper { display: flex; height: 200px; } .none { display: none; } </style> <div class="wrapper"> <figure class="image_wrapper"> <img src="https://fakeimg.pl/350x200/ff0000/?text=1"> </figure> <div class="button_area"> <div class="prev"><img src="https://fakeimg.pl/50x50/?text=prev"></div> <div class="next"><img src="https://fakeimg.pl/50x50/?text=next"></div> </div> </div> <script> class Photoview { constructor( init_index = 0 ){ this.$el = $('.image_wrapper img'); this.images = [ 'https://fakeimg.pl/350x200/ff0000/?text=1', 'https://fakeimg.pl/350x200/ff0000/000?text=2', 'https://fakeimg.pl/350x200/ff0000,128/000,255?text=3' ]; this.$nextBtn = $('.next'); this.$prevBtn = $('.prev'); this.index = init_index; this.handleEvent(); this.displayImg(); } get Index() { return this.index; } set Index( v ) { this.index = v; } handleEvent() { const self = this; this.$nextBtn.on("click", function(){ self.next( self.Index ); }); this.$prevBtn.on("click", function(){ self.prev(); }); } next() { this.index++; this.displayImg( this.Index ); } prev() { this.index--; this.displayImg( this.Index ); } displayImg() { this.$el.attr( 'src', this.images[ this.Index ] ); } } const Photoview_ins = new Photoview(); </script> </body> </html>

試したこと

いろいろ、ネットで調べてはみましたが解決に至らず...

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

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

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

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

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

m.ts10806

2019/11/15 04:13

thisがそれぞれのタイミングで何を保持しているか確認してみましたか?
m.ts10806

2019/11/15 04:14

どのように調べて何を見たのかは必ず具体的に記載してください。でないとなにも調べてないのと同じだと伝わります。
Ryu__ta

2019/11/15 04:23

ありがとうございます。 thisの参照先、調査し再度質問致します。
m.ts10806

2019/11/15 04:32

結果は質問本文編集して追記してください。 コードとエラーからthisの使い方の間違いに見えます。
guest

回答2

0

ベストアンサー

スコープの問題です。handleEventで登録しているイベントのthisがクラスを参照していません。
いくつか方法がありますがbindしたり、一時的に変数にいれて使うことで対応可能です。

js

1this.$nextBtn.on("click", this.next.bind(this)); 2this.$prevBtn.on("click", this.prev.bind(this));

js

1const self = this 2this.$nextBtn.on("click", function() { 3 self.next(); 4}); 5this.$prevBtn.on("click", function() { 6 self.prev(); 7});

参考:JavaScript の this を理解する多分一番分かりやすい説明

投稿2019/11/15 04:41

nt4c

総合スコア768

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

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

Ryu__ta

2019/11/15 07:15

的確なご指摘ありがとうございます。 まだ完成ではないですが、動くようになりました! ありがとうございます。
guest

0

DOMContentLoaded処理が抜けているので、jQueryオブジェクトがつかめてないのでは?

sample

javascript

1<style> 2 * { 3 margin: 0; 4 padding: 0; 5 } 6 .wrapper { 7 width: 350px; 8 } 9 .button_area { 10 background-color: #000; 11 height: 100px; 12 display: flex; 13 justify-content: center; 14 } 15 .button_area div { 16 align-self: center; 17 } 18 .button_area div + div { 19 margin-left: 20px; 20 } 21 .image_wrapper { 22 display: flex; 23 height: 200px; 24 } 25 .none { 26 display: none; 27 } 28</style> 29<script> 30class Photoview { 31 constructor(){ 32 document.addEventListener("DOMContentLoaded",()=>{ 33 this.el = document.querySelector('.image_wrapper img'); 34 this.images = [ 35 Object.assign(new Image(),{src:'https://fakeimg.pl/350x200/ff0000/?text=1'}), 36 Object.assign(new Image(),{src:'https://fakeimg.pl/350x200/ff0000/000?text=2'}), 37 Object.assign(new Image(),{src:'https://fakeimg.pl/350x200/ff0000,128/000,255?text=3'}), 38 ]; 39 this.index = 0; 40 this.nextBtn = document.querySelector('.next'); 41 this.prevBtn = document.querySelector('.prev'); 42 this.handleEvent(); 43 this.displayImg(); 44 }); 45 } 46 handleEvent() { 47 this.nextBtn.addEventListener("click",()=>{ 48 this.next(); 49 }); 50 this.prevBtn.addEventListener("click",()=>{ 51 this.prev(); 52 }); 53 } 54 next() { 55 this.index++; 56 if(this.index>this.images.length-1) this.index=0; 57 this.displayImg(); 58 } 59 prev() { 60 this.index--; 61 if(this.index<0) this.index=this.images.length-1; 62 this.displayImg(); 63 } 64 displayImg() { 65 this.el.src= this.images[ this.index ].src; 66 } 67} 68const Photoview_ins = new Photoview; 69</script> 70 71<div class="wrapper"> 72 <figure class="image_wrapper"> 73 <img src="https://fakeimg.pl/350x200/ff0000/?text=1"> 74 </figure> 75 <div class="button_area"> 76 <div class="prev"><img src="https://fakeimg.pl/50x50/?text=prev"></div> 77 <div class="next"><img src="https://fakeimg.pl/50x50/?text=next"></div> 78 </div> 79</div>

投稿2019/11/15 04:42

編集2019/11/15 05:31
yambejp

総合スコア114572

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

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

あなたの回答

tips

太字

斜体

打ち消し線

見出し

引用テキストの挿入

コードの挿入

リンクの挿入

リストの挿入

番号リストの挿入

表の挿入

水平線の挿入

プレビュー

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

ただいまの回答率
85.50%

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

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

質問する

関連した質問