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

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

新規登録して質問してみよう
ただいま回答率
85.51%
イベントハンドラ

マウスのクリックなどの特定の事象(イベント)が発生した時に実行される処理のことをイベントハンドラと呼びます。

JavaScript

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

Q&A

解決済

2回答

2080閲覧

JavaScript 他の要素との連携 イベントハンドラ

may88seiji

総合スコア79

イベントハンドラ

マウスのクリックなどの特定の事象(イベント)が発生した時に実行される処理のことをイベントハンドラと呼びます。

JavaScript

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

0グッド

0クリップ

投稿2016/05/23 03:29

###前提・実現したいこと
前提:
画像をクリックすると埋め込まれた動画に切り替わるサイトを作成しました。
また、マウスオーバー、マウスアウトすると画像の詳細文が表示、非表示に切り替わるようにもなっています。

実現したいこと:
画像→動画に切り替えた要素が既にある状態で、別の要素をクリックすると動画であった要素が画像に戻るようにすること。(他の要素を切替のスイッチにしたい)
また、画像の数が増えても対応させたいと思っています。

###試したこと
//画像と動画の切替 の関数を以下のスクリプトにしました。

javascript

1//画像と動画の切替 2function change(num) { 3 return function(){ 4 var x = document.getElementsByTagName("iframe"); 5 for(var i = 0; i < x.length; ++i){ 6 x[i].style.display = "none"; 7} 8 document.getElementById("img" + num).style.display = "none"; 9 document.getElementById("movie" + num).style.display = "block"; 10 return false; 11 }; 12};

クリックするたびに、まずiframeタグを取得し、for文にて全ての動画をdisplay = "none"に書き換える。
その後、クリックした要素の個別のidの画像を取得、動画に切り替える、という流れを想定してつくりました。

問題点:
別の要素をクリックすると動画は非表示にはなるのですが、それで固定されてしまいます。。。

皆様には他の要素を動画⇔画像にするスイッチ機能を持ったスクリプトの記述をお教えいただければと存じます。
どうぞよろしくお願い致します。

###前提のソースコード

html

1<!DOCTYPE html> 2<html lang="ja"> 3 4<head> 5 <meta charset="UTF-8"> 6 <title>他の要素との連携</title> 7 <style> 8 .item { 9 width: 25%; 10 float: left; 11 padding-bottom: 5%; 12 } 13 14 .item-box { 15 height: 200px; 16 width: 200px; 17 margin: auto; 18 background-color: #11D8B3; 19 border-radius: 5px; 20 } 21 22 #movie1, 23 #movie2{ 24 display: none; 25 } 26 27 .articles > div { 28 display: none; 29 font-size: 40px; 30 margin: auto; 31 float: left; 32 } 33 </style> 34</head> 35 36<body> 37 <!--画像と動画--> 38<div class="item"> 39 <div class="item-box"> 40 <div id="img1"><img src="img.jpeg" alt="img dog" width="200" height="200" alt=""></div> 41 <iframe id="movie1" width="200" height="200" src="https://www.youtube.com/embed/j5PLngd2WN0" allowfullscreen></iframe> 42 </div> 43</div> 44 45<div class="item"> 46 <div class="item-box"> 47 <div id="img2"><img src="img.jpeg" alt="img cat" width="200" height="200" alt=""></div> 48 <iframe id="movie2" width="200" height="200" src="https://www.youtube.com/embed/obTj1qvotdc" allowfullscreen></iframe> 49 </div> 50</div> 51 52<div class="articles"> 53 <!--ここから詳細文--> 54 <div id="article1">The term "domestic dog" is generally used for both domesticated and feral varieties. The English word dog comes from Middle English dogge, from Old English docga, a "powerful dog breed". 55 </div> 56 <div id="article2">ネコ(猫)は、狭義にはネコ目(食肉目)- ネコ亜目- ネコ科- ネコ亜科- ネコ属- ヤマネコ種- イエネコ亜種に分類される小型哺乳類であるイエネコ(家猫、学名:Felis silvestris catus)の通称である。 57 </div> 58</div> 59 60 <div class="articles"> 61 <!--ここから引用文--> 62 <div id="article1">The term "domestic dog" is generally used for both domesticated and feral varieties. The English word dog comes from Middle English dogge, from Old English docga, a "powerful dog breed". 63 </div> 64 <div id="article2">ネコ(猫)は、狭義にはネコ目(食肉目)- ネコ亜目- ネコ科- ネコ亜科- ネコ属- ヤマネコ種- イエネコ亜種に分類される小型哺乳類であるイエネコ(家猫、学名:Felis silvestris catus)の通称である。 65 </div> 66 </div> 67 68 69 <script type="text/javascript"> 70 //詳細の表示 71 function show(num) { 72 return function(){ 73 document.getElementsByClassName 74 document.getElementById("article" + num).style.display = "block"; 75 return false; 76 }; 77} 78 //詳細詳細の非表示 79function hide(num) { 80 return function(){ 81 document.getElementById("article" + num).style.display = "none"; 82 return false; 83 }; 84} 85//画像と動画の切替 86function change(num) { 87 return function(){ 88 document.getElementById("img" + num).style.display = "none"; 89 document.getElementById("movie" + num).style.display = "block"; 90 return false; 91 }; 92}; 93//イベントハンドラをまとめる関数 94window.onload=function(){ 95 var itemboxes = document.getElementsByClassName('item-box'); 96 for(var i = 0; i < itemboxes.length; i++){ 97 var num = i + 1; 98 var node; 99 // div 100 node = itemboxes[i].getElementsByTagName('div')[0]; 101 node.onclick=change(num); 102 // img 103 node = itemboxes[i].getElementsByTagName('img')[0]; 104 node.onmouseover=show(num); 105 node.onmouseout=hide(num); 106 // iframe 107 node = itemboxes[i].getElementsByTagName('iframe')[0]; 108 node.onmouseover=show(num); 109 node.onmouseout=hide(num); 110 } 111}; 112 </script> 113</body> 114 115</html>

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

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

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

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

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

guest

回答2

0

こんなんじゃいかんですかね?

javascript

1//画像と動画の切替 2function change(num) { 3 return function(){ 4 // imgXのタグを取得 5 var img = document.getElementById("img" + num); 6 var imgDisp = img.style.display; 7 // 設定がなければ「block」→function実行後のmovieXタグの設定値 8 if(!imgDisp||imgDisp.length==0){ imgDisp = "block"; } 9 10 // movieXのタグを取得 11 var movie = document.getElementById("movie" + num); 12 var movieDisp = movie.style.display; 13 // 設定がなければ「none」→function実行後のimgXタグの設定値 14 if(!movieDisp||movieDisp.length==0){ movieDisp = "none"; } 15 16 // 切り替え 17 img.style.display = movieDisp; 18 movie.style.display = imgDisp; 19 20 return false; 21 }; 22}; 23

■ここから追記
よくよく見たら、「change()」を実行するイベントが「style.display='none'」される要素についてました。
これでは「style.display='none'」された後、クリックされる要素がなくなります(非表示になるのでクリック不能になる)。
そこで、こんな風にしてみてはどうでしょうか?

html

1<div class="item"> 2 <!-- クリックできる余地を作る→「dog」という文字列 --> 3 <div class="item-box"> 4 dog 5 <div id="img1"><img src="img.jpeg" alt="img dog" width="200" height="200" alt=""></div> 6 <iframe id="movie1" width="200" height="200" src="https://www.youtube.com/embed/j5PLngd2WN0" allowfullscreen></iframe> 7 </div> 8</div>

javascript

1//イベントハンドラをまとめる関数 2window.onload=function(){ 3 var itemboxes = document.getElementsByClassName('item-box'); 4 for(var i = 0; i < itemboxes.length; i++){ 5 var num = i + 1; 6 var node; 7 // div 8 // 文字列「dog」を含む要素にイベントハンドラを紐づける。 9 node = itemboxes[i];//.getElementsByTagName('div')[0]; 10 node.onclick=change(num); 11

投稿2016/05/23 05:21

編集2016/05/23 07:08
tkturbo

総合スコア5572

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

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

may88seiji

2016/05/23 06:02

tkturbo様、回答ありがとうございます。 提案いただいたコードを試してみましたが、他の要素をスイッチに画像、動画の切替は反応がありませんね。。。 tkturbo様のブラウザ上では動いているのでしょうか? お手数おかけいたします。
tkturbo

2016/05/23 07:10

追記しました。
may88seiji

2016/05/23 07:25 編集

tkturbo様、追記ありがとうございます。 「dog」という文字列をクリックするとdogの画像と動画が切り替わるようになりました。 ただ、実現したいことの「他の要素の切替」はまだできていないですね。。。 (ex.catの画像をクリック→dogの動画が画像に変わる) できなくて申し訳ないです
guest

0

ベストアンサー

change(num)の処理の中で行っているのが指定された「動画の表示」「画像の非表示」の2つなので下記のどちらかのパターンで対応できると思います。

パターン1
「動画の表示」「画像の非表示」処理の前に「全ての動画の非表示」「全ての画像の表示」の処理を加える

パターン2
現在再生中の動画を識別するvar now_id=0等を関数外に用意して、動画を表示した場合にnow_idnow_id = numとして代入
動画の切替時にnow_idを参照して、「現在表示中の動画の非表示」と「対応する画像の表示」処理を加える
再生中のものがない場合は0になるようにしてif(0<now_id)等で処理が必要かを判別

投稿2016/05/23 04:09

退会済みユーザー

退会済みユーザー

総合スコア0

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

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

may88seiji

2016/05/23 05:01

パターン1として下記コードを試してみましたが、切替はできておりません。 (他の要素をクリックすると、既にある動画自体が消えてしまう) 誠に恐縮ですが、不備をご指摘いただければ幸いです。 ``` //画像と動画の切替 function change(num) { return function(){ var x = document.getElementsByTagName("iframe"); for(var i = 0; i < x.length; ++i){ x[i].style.display = "none"; } var y = document.getElementsByTagName("img"); for(var i = 0; i < y.length; ++i){ y[i].style.display = "block"; } document.getElementById("img" + num).style.display = "none"; document.getElementById("movie" + num).style.display = "block"; return false; }; ```
退会済みユーザー

退会済みユーザー

2016/05/23 06:18

「他の要素をクリックすると、既にある動画自体が消えてしまう」のでちょっと混乱してるのですが そもそもの流れは 画像をクリック→対応した動画を表示&クリックした画像の非表示 また2回目以降に画像をクリックした時の流れは 画像をクリック→現在表示中の動画があれば非表示&対応した動画の再表示→クリックした画像に対応した動画の表示&クリックした画像の非表示 で合ってますか? 上記が合っている前提で修正後で画像の非表示で行っている x[i].style.display = "none"; の部分はimgタグに直接display:noneを指定していますが、画像切替時にでは document.getElementById("img" + num).style.display = "none"; と画像を囲っているdivに対してdisplay:noneを指定しています。 そのため既に表示されていた動画に対応した画像が再表示されないのではないかと思います。 表示の初期化をするには imgを囲ってるdivにdisplay:block iframeをdisplay:none にする必要があると思いますので var itemboxes = document.getElementsByClassName('item-box'); for(var i = 0; i < itemboxes.length; i++){ itemboxes[i].getElementsByTagName('div')[0].style.display = "none"; } という感じになるかなと思うのですが動作確認していないので要素を指定している箇所が間違ってるかもしれません。
may88seiji

2016/05/23 06:50

hide2e3r様 コメントありがとうございます。 前提はhide2e3r様 の理解で間違いありません。 表示の初期化の説明も納得できるものなのですが、下記コードを試したところ一度目のクリックで、クリックした以外の要素(画像、動画)が非表示になってしまいますね。。。 //画像と動画の切替 function change(num) { return function(){ var itemboxes = document.getElementsByClassName('item-box'); for(var i = 0; i < itemboxes.length; i++){ itemboxes[i].getElementsByTagName('div')[0].style.display = "none"; } document.getElementById("img" + num).style.display = "none"; document.getElementById("movie" + num).style.display = "block"; return false; }; };
退会済みユーザー

退会済みユーザー

2016/05/23 09:18

すみません画像は初期化の際に表示にするので itemboxes[i].getElementsByTagName('div')[0].style.display = "block"; でした
may88seiji

2016/05/23 10:11 編集

コメントありがとうございます。 提案頂いたコードを試したところ、クリック後に画像、動画が縦に並んで表示されましたので、 for(var i = 0; i < itemboxes.length; i++){ itemboxes[i].getElementsByTagName('div')[0].style.display = "block"; } var x = document.getElementsByTagName("iframe"); for(var i = 0; i < x.length; ++i){ x[i].style.display = "none"; } とすると画像⇄動画を切り替えることが出来るようになりました。 ただ、動画を再生中だと動画非表示に切り替えても背後で音声が流れままになってしまいます。 クリックで非表示&停止、にするにはどうすれば良いでしょうか? 別トピを立てた方が良いですかね。。。
退会済みユーザー

退会済みユーザー

2016/05/24 09:55

動画の停止を操作したいのであればYouTube iFrame APIを使用するのがいいと思います。 検索すると参考サイトもかなり出てきますのでまずは試してみて下さい。 うまく行かない場合は現在の質問文の内容とは変わってきてしまうので新たに質問されたほうがよいと思います。
may88seiji

2016/05/24 14:06

ありがとうございます。YouTube iFrame APIについて調べて、とりあえずプログラムを動かしてみようと思います。
guest

あなたの回答

tips

太字

斜体

打ち消し線

見出し

引用テキストの挿入

コードの挿入

リンクの挿入

リストの挿入

番号リストの挿入

表の挿入

水平線の挿入

プレビュー

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

ただいまの回答率
85.51%

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

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

質問する

関連した質問