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

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

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

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

関数

関数(ファンクション・メソッド・サブルーチンとも呼ばれる)は、はプログラムのコードの一部であり、ある特定のタスクを処理するように設計されたものです。

Q&A

解決済

2回答

1908閲覧

JavaScript 引数、関数の汎用化 画像動画CSS

may88seiji

総合スコア79

JavaScript

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

関数

関数(ファンクション・メソッド・サブルーチンとも呼ばれる)は、はプログラムのコードの一部であり、ある特定のタスクを処理するように設計されたものです。

0グッド

0クリップ

投稿2016/05/16 13:33

###前提・実現したいこと
前提
画像をクリックすると埋め込まれた動画に切り替わるサイトを作成しました。

実現したいこと
現在、1つの画像に対して、1つの関数を指定しています。(下記コードでは、計4組)
こちらの関数を汎用化して、画像を増やしても1つの関数で対応できるようしたいと思っています。

###該当のソースコード

HTML

1<!DOCTYPE html> 2<html lang="ja"> 3<head> 4 <meta charset="UTF-8"> 5 <title>関数の汎用化</title> 6 <style> 7 .item { 8 width: 25%; 9 float: left; 10 padding-bottom: 5%; 11 12 } 13 .item-box { 14 height: 200px; 15 width: 200px; 16 margin: auto; 17 background-color: #11D8B3; 18 border-radius: 5px; 19 } 20 #movie1{ 21 display: none; 22 } 23 24 #movie2{ 25 display: none; 26 } 27 28 #movie3{ 29 display: none; 30 } 31 32 #movie4{ 33 display: none; 34 } 35 </style> 36</head> 37<body> 38<!--ここから画像と動画--> 39 <div class="item"> 40 <div class="item-box"><div id="img1" onclick="change1();return false"><img src="img.jpeg" width="200" height="200" alt=""></div> 41 <iframe id="movie1" width="200" height="200" src="https://www.youtube.com/embed/SIKSc397sn4" allowfullscreen></iframe> 42 </div> 43 </div> 44 45 <div class="item"> 46 <div class="item-box"><div id="img2" onclick="change2();return false"><img src="img.jpeg" width="200" height="200" alt=""></div> 47 <iframe id="movie2" width="200" height="200" src="https://www.youtube.com/embed/yWP6Qki8mWc" allowfullscreen></iframe> 48 </div> 49 </div> 50 51 <div class="item"> 52 <div class="item-box"><div id="img3" onclick="change3();return false"><img src="img.jpeg" width="200" height="200" alt=""></div> 53 <iframe id="movie3" width="200" height="200" src="https://www.youtube.com/embed/uZMQU4c1pEg" allowfullscreen></iframe> 54 </div> 55 </div> 56 57 <div class="item"> 58 <div class="item-box"><div id="img4" onclick="change4();return false"><img src="img.jpeg" width="200" height="200" alt=""></div> 59 <iframe id="movie4" width="200" height="200" src="https://www.youtube.com/embed/70-WSgZn1MQ" allowfullscreen></iframe> 60 </div> 61 </div> 62 63<!--ここから関数--> 64<script type="text/javascript"> 65 function change1(){ 66 document.getElementById("img01").style.display="none"; 67 document.getElementById("movie1").style.display="block"; 68 }; 69 70 function change2(){ 71 document.getElementById("img02").style.display="none"; 72 document.getElementById("movie2").style.display="block"; 73 }; 74 75 function change3(){ 76 document.getElementById("img03").style.display="none"; 77 document.getElementById("movie3").style.display="block"; 78 }; 79 80 function change4(){ 81 document.getElementById("img04").style.display="none"; 82 document.getElementById("movie4").style.display="block"; 83 }; 84 85</script> 86 87 </body> 88</html>

###試したこと
配列を作成し、添字を引数として関数に引き渡すように下記コードを組み込みましたが、クリック後に反応はありません。。。

<!--画像--> <div class="item"> <div class="item-box"><div id="img01" onclick="change(0);return false"><img src="img.jpeg" width="200" height="200" alt=""></div> <iframe id="movie1" width="200" height="200" src="https://www.youtube.com/embed/SIKSc397sn4" allowfullscreen></iframe> </div> </div> <!--関数--> <script type="text/javascript"> var img = [1,2,3,4]; var movie=[1,2,3,4]; function change(i){ document.getElementById("img[i]").style.display="none"; document.getElementById("movie[i]").style.display="block"; }; </script>

皆様には関数を汎用化方法についてお教えいただければ幸いです。

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

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

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

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

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

guest

回答2

0

ベストアンサー

idを指定している部分ですが"img[i]"はそのまま文字列として扱われてしまうので

js

1document.getElementById("img"+img[i]).style.display="none"; 2document.getElementById("movie"+movie[i]).style.display="block";

とする必要があります。
また配列に入れてる値ですが指定したいIDがimg01なので

js

1var img = ["01","02","03","04"]; 2var movie=["01","02","03","04"];

ですが、このケースでしたら

html

1<div id="img01" onclick="change(this);">

として
画像のidをimg01,img02,img03
動画のidをmovie01,movie02,movie03
と両方とも2桁の数字に揃える
javascriptは

js

1function change(element){ 2 var id = element.id; 3 var mid = id.replace('img','movie'); 4 element.style.display="none"; 5 document.getElementById(mid).style.display="block"; 6 return false; 7};

とすれは配列も不要になります。

var id = element.id;はclickされたdivのidを取得していますので例えばimg01が変数idの値になります。
これを動画のidが指定できるようにid.replace('img','movie')でimgをmovieに置換してmovie01にしています。

投稿2016/05/16 13:50

退会済みユーザー

退会済みユーザー

総合スコア0

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

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

may88seiji

2016/05/16 13:58

回答ありがとうございます。汎用化の際のidや配列の扱いついて丁寧に記述いただき、大変勉強になりました。 画像以外にも、いろいろと応用してみようと思います。
退会済みユーザー

退会済みユーザー

2016/05/16 14:02

1つ書き忘れました return flase; はhtmlに毎回書くよりは関数側で書いてしまうほうがスッキリすると思います
may88seiji

2016/05/17 10:32

ありがとうございます。無事組み込むことができました。 理解の補足をおねがいしたいのですが、、、 <div id="img01" onclick="change(this);">の(this)が、function change(element)でなぜ(element)に置き換わるのでしょうか。→要素名を変更するため? element.style.display="none";はなぜdocument.getElementByIdがついていないのでしょうか?→クリックしたelementが指定されている? よければ補足いただければ幸いです。
退会済みユーザー

退会済みユーザー

2016/05/17 10:52

別にthisでもいいんですが onclick="change(this);(こっちは変えちゃだめです) の部分のthisはdiv.img01自身のことですよね、関数の引数に自分という要素を渡しています。 受け取る方の関数はchange(element)で何かしらの要素を関数の引数として受け取っています、eでもyousoでもxでも動作には問題ありませんが、後日コードをみたときにelementとなっていれば引数の名前からなんらかの要素を受け取ってるのかな?と推測できるようにです。
may88seiji

2016/05/17 10:56

早い回答ありがとうございます。理解いたしました。些細なことですが、聞いて良かったです。
guest

0

自分だったら、こんな感じで渡して
onclick="change('1');return false"

JavaScript

1<script type="text/javascript"> 2 function change(num){ 3 document.getElementById("img0"+num).style.display="none"; 4 document.getElementById("movie"+num).style.display="block"; 5 }; 6</script>

may88seijiさんのも、同様な感じで
ちょっと修正したらいけるんじゃないスか?

投稿2016/05/16 13:43

takasima20

総合スコア7458

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

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

may88seiji

2016/05/16 13:53

ありがとうございます。無事に汎用化することができました。
guest

あなたの回答

tips

太字

斜体

打ち消し線

見出し

引用テキストの挿入

コードの挿入

リンクの挿入

リストの挿入

番号リストの挿入

表の挿入

水平線の挿入

プレビュー

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

ただいまの回答率
85.51%

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

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

質問する

関連した質問