###前提・実現したいこと
前提
画像をクリックすると埋め込まれた動画に切り替わるサイトを作成しました。
実現したいこと
現在、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>
皆様には関数を汎用化方法についてお教えいただければ幸いです。
回答2件
あなたの回答
tips
プレビュー
バッドをするには、ログインかつ
こちらの条件を満たす必要があります。
2016/05/16 13:58
退会済みユーザー
2016/05/16 14:02
2016/05/17 10:32
退会済みユーザー
2016/05/17 10:52
2016/05/17 10:56