JavaScript　画像動画の切替　詳細の表示　イベントハンドラ

###実現したいこと
1,画像をクリックすると埋め込まれた動画に切り替わる。
2,画像と動画にmouseover mouseoutすると詳細文が表示される。
3,管理がしやすい、きれいなcoding(記事の増減時など)

###試したこと
function を以下三つ用意し、各イベントハンドラと対応させました。
show(詳細文を表示する)→onmouseover
hide(詳細文を非表示にする)→onmouseout
change(画像と動画を切替える)→onclick
切替え操作はcssをdisplay:none;⇄block;にて書き換えることによって行っています。
一応、1,2,の機能を実現できたのですが、思いついた機能を付け加えただけのcodingになっております。
それゆえ記事を増やす場合に必要な記述が多くなっているのが現状です。
皆様には、3の”管理がしやすい、きれいなcoding”についてアドバイスをいただければ幸いです。（添付したcodeと全く異なる構造でも嬉しいです）
どうぞよろしくお願いします。

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

html
1<!DOCTYPE html>
2<html lang="ja">
3
4<head>
5    <meta charset="UTF-8">
6    <title>test</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" onclick="change(1)"><img onmouseover="show(1)" onmouseout="hide(1)" src="img.jpeg" alt="img dog" width="200" height="200" alt=""></div>
41            <iframe id="movie1" onmouseover="show(1)" onmouseout="hide(1)" 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" onclick="change(2)"><img onmouseover="show(2)" onmouseout="hide(2)" src="img.jpeg" alt="img cat" width="200" height="200" alt=""></div>
48            <iframe id="movie2" onmouseover="show(2)" onmouseout="hide(2)" 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
61    <script type="text/javascript">
62        function show(num) {
63            document.getElementById("article" + num).style.display = "block";
64            return false;
65        }
66
67        function hide(num) {
68            document.getElementById("article" + num).style.display = "none";
69            return false;
70        }
71
72        function change(num) {
73            document.getElementById("img" + num).style.display = "none";
74            document.getElementById("movie" + num).style.display = "block";
75            return false;
76        };
77    </script>
78</body>
79
80</html>

行動規範の内容に同意します

回答1件

ベストアンサー

「『class="item-box"』の要素以下は構成要素とその出現順が固定」というルールを決められれば各イベントをjavascriptで付け足していく、という方法がとれるかも。

javascript
1function show(num) {
2  return function(){
3    document.getElementById("article" + num).style.display = "block";
4    return false;
5  };
6}
7
8function hide(num) {
9  return function(){
10    document.getElementById("article" + num).style.display = "none";
11    return false;
12  };
13}
14
15function change(num) {
16  return function(){
17    document.getElementById("img" + num).style.display = "none";
18    document.getElementById("movie" + num).style.display = "block";
19    return false;
20  };
21};
22
23window.onload=function(){
24  var itemboxes = document.getElementsByClassName('item-box');
25  for(var i = 0; i < itemboxes.length; i++){
26    var num = i + 1;
27    var node;
28    // div
29    node = itemboxes[i].getElementsByTagName('div')[0];
30    node.onclick=change(num);
31    // img
32    node = itemboxes[i].getElementsByTagName('img')[0];
33    node.onmouseover=show(num);
34    node.onmouseout=hide(num);
35    // iframe
36    node = itemboxes[i].getElementsByTagName('iframe')[0];
37    node.onmouseover=show(num);
38    node.onmouseout=hide(num);
39  }
40};

スクリプトをこんな具合にしておけばhtml部は

html
1<!--画像と動画-->
2<div class="item">
3    <div class="item-box">
4        <div id="img1"><img src="img.jpeg" alt="img dog" width="200" height="200" alt=""></div>
5        <iframe id="movie1" width="200" height="200" src="https://www.youtube.com/embed/j5PLngd2WN0" allowfullscreen></iframe>
6    </div>
7</div>
8
9<div class="item">
10    <div class="item-box">
11        <div id="img2"><img src="img.jpeg" alt="img cat" width="200" height="200" alt=""></div>
12        <iframe id="movie2" width="200" height="200" src="https://www.youtube.com/embed/obTj1qvotdc" allowfullscreen></iframe>
13    </div>
14</div>
15
16<div class="articles">
17    <!--ここから詳細文-->
18    <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".
19    </div>
20    <div id="article2">ネコ（猫）は、狭義にはネコ目（食肉目）- ネコ亜目- ネコ科- ネコ亜科- ネコ属- ヤマネコ種- イエネコ亜種に分類される小型哺乳類であるイエネコ（家猫、学名：Felis silvestris catus）の通称である。
21    </div>
22</div>