teratail
回答率
85.47%
質問するログイン新規登録
トップに関する質問JavaScriptで関数が複雑な入れ子になる場合の処理

編集履歴

質問編集履歴

7

補足部分の削除

2018/09/15 23:24

投稿

eaconian
eaconian

スコア21

test CHANGED
File without changes
test CHANGED
@@ -127,21 +127,3 @@
127
127
  どうか有識者の皆さま、プロの視点からのアドバイスを頂戴できれば幸甚に存じます。
128
128
 
129
129
  何卒宜しくお願い申し上げます。
130
-
131
-
132
-
133
- ###補足
134
-
135
- アクセスとご回答の比率から内容の困難さが予想されます。
136
-
137
-
138
-
139
- そこで、``// ★「見る」クリックで動画表示``の関数``on('click', function() {``だけでも使うことができれば御の字であると補足させて頂きたいと思います。
140
-
141
-
142
-
143
- ベストな選択は上の３つ全てのfunctionを使うことですが、この１つだけでも囲む方法がもしあればぜひ、ご意見を下さいませ。
144
-
145
-
146
-
147
- 私事で大変恐縮ですが、この「見る」クリックの部分は、動画遅延ロード機能（サムネイルのクリックで動画を読み込む機能）を表しておりまして、これだけはどうしても譲りたくないのです。

6

補足

2018/09/15 23:24

投稿

eaconian
eaconian

スコア21

test CHANGED
File without changes
test CHANGED
@@ -127,3 +127,21 @@
127
127
  どうか有識者の皆さま、プロの視点からのアドバイスを頂戴できれば幸甚に存じます。
128
128
 
129
129
  何卒宜しくお願い申し上げます。
130
+
131
+
132
+
133
+ ###補足
134
+
135
+ アクセスとご回答の比率から内容の困難さが予想されます。
136
+
137
+
138
+
139
+ そこで、``// ★「見る」クリックで動画表示``の関数``on('click', function() {``だけでも使うことができれば御の字であると補足させて頂きたいと思います。
140
+
141
+
142
+
143
+ ベストな選択は上の３つ全てのfunctionを使うことですが、この１つだけでも囲む方法がもしあればぜひ、ご意見を下さいませ。
144
+
145
+
146
+
147
+ 私事で大変恐縮ですが、この「見る」クリックの部分は、動画遅延ロード機能（サムネイルのクリックで動画を読み込む機能）を表しておりまして、これだけはどうしても譲りたくないのです。

5

コードの修正

2018/09/15 22:43

投稿

eaconian
eaconian

スコア21

test CHANGED
File without changes
test CHANGED
@@ -4,7 +4,7 @@
4
4
 
5
5
  まず実装できた場合がこちらでして、
6
6
 
7
- [https://jsfiddle.net/savm7etn/](https://jsfiddle.net/savm7etn/)
7
+ [https://jsfiddle.net/8d3g6mc5/](https://jsfiddle.net/8d3g6mc5/)
8
8
 
9
9
  ご覧のように「再生・停止」いずれも動画が制御できています。
10
10
 
@@ -116,7 +116,7 @@
116
116
 
117
117
  上記コードのように３つの関数を加えて動作しなくなったものがこちらです。
118
118
 
119
- [https://jsfiddle.net/savm7etn/1/](https://jsfiddle.net/savm7etn/1/)
119
+ [https://jsfiddle.net/8d3g6mc5/1/](https://jsfiddle.net/8d3g6mc5/1/)
120
120
 
121
121
 
122
122
 

4

コードの修正

2018/09/15 17:14

投稿

eaconian
eaconian

スコア21

test CHANGED
File without changes
test CHANGED
@@ -36,7 +36,23 @@
36
36
 
37
37
  $('.lazy-load-youtube').on('click', function() {
38
38
 
39
- $('#target').html('<div class="reply_inner_media"><div class="container-lazyload preview-lazyload container-youtube"><iframe style="vertical-align:top;" src="//www.youtube.com/embed/ZVT_CNl0Wvc?autoplay=1&amp;iv_load_policy=3&amp;rel=0" allowfullscreen="" width="546" height="315" frameborder="0"></iframe></div></div>');
39
+ $('#target').html('<div class="media">
40
+
41
+ <div class="container-youtube">
42
+
43
+ <iframe src="//www.youtube.com/embed/ZVT_CNl0Wvc
44
+
45
+ ?autoplay=1&amp;iv_load_policy=3&amp;rel=0"
46
+
47
+ allowfullscreen=""
48
+
49
+ frameborder="0">
50
+
51
+ </iframe>
52
+
53
+ </div>
54
+
55
+ </div>');
40
56
 
41
57
 
42
58
 
@@ -52,9 +68,11 @@
52
68
 
53
69
  function onYouTubeIframeAPIReady() {
54
70
 
55
- player = new YT.Player( document.getElementsByClassName('container-youtube')[0], {
71
+ player = new YT.Player(
56
72
 
73
+ document.getElementsByClassName('container-youtube')[0], {
74
+
57
- videoId: 'ZVT_CNl0Wvc',
75
+ videoId: 'ZVT_CNl0Wvc',
58
76
 
59
77
  });
60
78
 
@@ -96,7 +114,7 @@
96
114
 
97
115
  ```
98
116
 
99
- 上記コードのように３つの関数を加えて動作しなくなったサンプルがこちらです。
117
+ 上記コードのように３つの関数を加えて動作しなくなったものがこちらです。
100
118
 
101
119
  [https://jsfiddle.net/savm7etn/1/](https://jsfiddle.net/savm7etn/1/)
102
120
 

3

誤字の修正

2018/09/15 17:06

投稿

eaconian
eaconian

スコア21

test CHANGED
File without changes
test CHANGED
@@ -14,7 +14,7 @@
14
14
 
15
15
 
16
16
 
17
- つまり下記のhttps://teratail.com/questions/146752にあるように、
17
+ つまり下記のJavaScriptにあるように、
18
18
 
19
19
  ``// 制御ボタンの設定``の部分を、
20
20
 

2

誤字の修正

2018/09/15 16:57

投稿

eaconian
eaconian

スコア21

test CHANGED
@@ -1 +1 @@
1
- Javascriptで関数が複雑な入れ子になる場合の処理
1
+ JavaScriptで関数が複雑な入れ子になる場合の処理
test CHANGED
@@ -1,4 +1,4 @@
1
- Youtbeの制御ボタンについて、機能は実装できたのですが、関数を入れ子にすると動作せず、質問させて頂きます。
1
+ YouTubeの制御ボタンについて、機能は実装できたのですが、関数を入れ子にすると動作せず、質問させて頂きます。
2
2
 
3
3
 
4
4
 
@@ -14,7 +14,7 @@
14
14
 
15
15
 
16
16
 
17
- つまり下記のJavascriptにあるように、
17
+ つまり下記のhttps://teratail.com/questions/146752にあるように、
18
18
 
19
19
  ``// 制御ボタンの設定``の部分を、
20
20
 
@@ -102,7 +102,7 @@
102
102
 
103
103
 
104
104
 
105
- これはYoutubeAPIについての問題というよりも、基本的なJavascriptの入れ子構造について知識不足であると思うのですが、これだけ色々な入れ子になるとどう対処したらいいものか…、私ではまったく判断できません。
105
+ これはYouTube APIについての問題というよりも、基本的なJavaScriptの入れ子構造について知識不足であると思うのですが、これだけ色々な入れ子になるとどう対処したらいいものか…、私ではまったく判断できません。
106
106
 
107
107
 
108
108
 

1

リンク先修正

2018/09/15 16:56

投稿

eaconian
eaconian

スコア21

test CHANGED
File without changes
test CHANGED
@@ -36,7 +36,7 @@
36
36
 
37
37
  $('.lazy-load-youtube').on('click', function() {
38
38
 
39
- $('#target').html('<div class="reply_inner_media"><div class="container-lazyload preview-lazyload container-youtube"><iframe style="vertical-align:top;" src="//www.youtube.com/embed/wSu0dJnib_k?autoplay=1&amp;iv_load_policy=3&amp;rel=0" allowfullscreen="" width="546" height="315" frameborder="0"></iframe></div></div>');
39
+ $('#target').html('<div class="reply_inner_media"><div class="container-lazyload preview-lazyload container-youtube"><iframe style="vertical-align:top;" src="//www.youtube.com/embed/ZVT_CNl0Wvc?autoplay=1&amp;iv_load_policy=3&amp;rel=0" allowfullscreen="" width="546" height="315" frameborder="0"></iframe></div></div>');
40
40
 
41
41
 
42
42
 
@@ -54,7 +54,7 @@
54
54
 
55
55
  player = new YT.Player( document.getElementsByClassName('container-youtube')[0], {
56
56
 
57
- videoId: 'wSu0dJnib_k',
57
+ videoId: 'ZVT_CNl0Wvc',
58
58
 
59
59
  });
60
60