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

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

ただいまの
回答率

90.12%

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

解決済

回答 2

投稿

  • 評価
  • クリップ 0
  • VIEW 906

may88seiji

score 69

前提・実現したいこと

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

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

試したこと

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

//画像と動画の切替        
function change(num) {
  return function(){
    var x = document.getElementsByTagName("iframe");
    for(var i = 0; i < x.length; ++i){
    x[i].style.display = "none";
}  
    document.getElementById("img" + num).style.display = "none";
    document.getElementById("movie" + num).style.display = "block";
    return false;
  };
};


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

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

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

前提のソースコード

<!DOCTYPE html>
<html lang="ja">

<head>
    <meta charset="UTF-8">
    <title>他の要素との連携</title>
    <style>
        .item {
            width: 25%;
            float: left;
            padding-bottom: 5%;
        }

        .item-box {
            height: 200px;
            width: 200px;
            margin: auto;
            background-color: #11D8B3;
            border-radius: 5px;
        }

        #movie1,
        #movie2{
            display: none;
        }

        .articles > div {
            display: none;
            font-size: 40px;
            margin: auto;
            float: left;
        }
    </style>
</head>

<body>
   <!--画像と動画-->
<div class="item">
    <div class="item-box">
        <div id="img1"><img src="img.jpeg" alt="img dog" width="200" height="200" alt=""></div>
        <iframe id="movie1" width="200" height="200" src="https://www.youtube.com/embed/j5PLngd2WN0" allowfullscreen></iframe>
    </div>
</div>

<div class="item">
    <div class="item-box">
        <div id="img2"><img src="img.jpeg" alt="img cat" width="200" height="200" alt=""></div>
        <iframe id="movie2" width="200" height="200" src="https://www.youtube.com/embed/obTj1qvotdc" allowfullscreen></iframe>
    </div>
</div>

<div class="articles">
    <!--ここから詳細文-->
    <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".
    </div>
    <div id="article2">ネコ(猫)は、狭義にはネコ目(食肉目)- ネコ亜目- ネコ科- ネコ亜科- ネコ属- ヤマネコ種- イエネコ亜種に分類される小型哺乳類であるイエネコ(家猫、学名:Felis silvestris catus)の通称である。
    </div>
</div>

    <div class="articles">
        <!--ここから引用文-->
        <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".
        </div>
        <div id="article2">ネコ(猫)は、狭義にはネコ目(食肉目)- ネコ亜目- ネコ科- ネコ亜科- ネコ属- ヤマネコ種- イエネコ亜種に分類される小型哺乳類であるイエネコ(家猫、学名:Felis silvestris catus)の通称である。
        </div>
    </div>


    <script type="text/javascript">
        //詳細の表示
        function show(num) {
  return function(){
    document.getElementsByClassName
    document.getElementById("article" + num).style.display = "block";
    return false;
  };
}
        //詳細詳細の非表示
function hide(num) {
  return function(){
    document.getElementById("article" + num).style.display = "none";
    return false;
  };
}
//画像と動画の切替        
function change(num) {
  return function(){
    document.getElementById("img" + num).style.display = "none";
    document.getElementById("movie" + num).style.display = "block";
    return false;
  };
};
//イベントハンドラをまとめる関数
window.onload=function(){
  var itemboxes = document.getElementsByClassName('item-box');
  for(var i = 0; i < itemboxes.length; i++){
    var num = i + 1;
    var node;
    // div
    node = itemboxes[i].getElementsByTagName('div')[0];
    node.onclick=change(num);
    // img
    node = itemboxes[i].getElementsByTagName('img')[0];
    node.onmouseover=show(num);
    node.onmouseout=hide(num);
    // iframe
    node = itemboxes[i].getElementsByTagName('iframe')[0];
    node.onmouseover=show(num);
    node.onmouseout=hide(num);
  }
};
    </script>
</body>

</html>
  • 気になる質問をクリップする

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

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

    クリップを取り消します

  • 良い質問の評価を上げる

    以下のような質問は評価を上げましょう

    • 質問内容が明確
    • 自分も答えを知りたい
    • 質問者以外のユーザにも役立つ

    評価が高い質問は、TOPページの「注目」タブのフィードに表示されやすくなります。

    質問の評価を上げたことを取り消します

  • 評価を下げられる数の上限に達しました

    評価を下げることができません

    • 1日5回まで評価を下げられます
    • 1日に1ユーザに対して2回まで評価を下げられます

    質問の評価を下げる

    teratailでは下記のような質問を「具体的に困っていることがない質問」、「サイトポリシーに違反する質問」と定義し、推奨していません。

    • プログラミングに関係のない質問
    • やってほしいことだけを記載した丸投げの質問
    • 問題・課題が含まれていない質問
    • 意図的に内容が抹消された質問
    • 広告と受け取られるような投稿

    評価が下がると、TOPページの「アクティブ」「注目」タブのフィードに表示されにくくなります。

    質問の評価を下げたことを取り消します

    この機能は開放されていません

    評価を下げる条件を満たしてません

    評価を下げる理由を選択してください

    詳細な説明はこちら

    上記に当てはまらず、質問内容が明確になっていない質問には「情報の追加・修正依頼」機能からコメントをしてください。

    質問の評価を下げる機能の利用条件

    この機能を利用するためには、以下の事項を行う必要があります。

回答 2

checkベストアンサー

0

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

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

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

投稿

  • 回答の評価を上げる

    以下のような回答は評価を上げましょう

    • 正しい回答
    • わかりやすい回答
    • ためになる回答

    評価が高い回答ほどページの上位に表示されます。

  • 回答の評価を下げる

    下記のような回答は推奨されていません。

    • 間違っている回答
    • 質問の回答になっていない投稿
    • スパムや攻撃的な表現を用いた投稿

    評価を下げる際はその理由を明確に伝え、適切な回答に修正してもらいましょう。

  • 2016/05/23 19:10 編集

    コメントありがとうございます。
    提案頂いたコードを試したところ、クリック後に画像、動画が縦に並んで表示されましたので、
    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 18:55

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

    キャンセル

  • 2016/05/24 23:06

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

    キャンセル

0

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

//画像と動画の切替        
function change(num) {
  return function(){
    // imgXのタグを取得
    var img = document.getElementById("img" + num);
    var imgDisp = img.style.display;
    // 設定がなければ「block」→function実行後のmovieXタグの設定値
    if(!imgDisp||imgDisp.length==0){ imgDisp = "block"; }

    // movieXのタグを取得
    var movie = document.getElementById("movie" + num);
    var movieDisp = movie.style.display;
    // 設定がなければ「none」→function実行後のimgXタグの設定値
    if(!movieDisp||movieDisp.length==0){ movieDisp = "none"; }

    // 切り替え
    img.style.display = movieDisp;
    movie.style.display = imgDisp;

    return false;
  };
};

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

<div class="item">
    <!-- クリックできる余地を作る→「dog」という文字列 -->
    <div class="item-box">
        dog
        <div id="img1"><img src="img.jpeg" alt="img dog" width="200" height="200" alt=""></div>
        <iframe id="movie1" width="200" height="200" src="https://www.youtube.com/embed/j5PLngd2WN0" allowfullscreen></iframe>
    </div>
</div>
//イベントハンドラをまとめる関数
window.onload=function(){
  var itemboxes = document.getElementsByClassName('item-box');
  for(var i = 0; i < itemboxes.length; i++){
    var num = i + 1;
    var node;
    // div
    // 文字列「dog」を含む要素にイベントハンドラを紐づける。
    node = itemboxes[i];//.getElementsByTagName('div')[0];
    node.onclick=change(num);

投稿

編集

  • 回答の評価を上げる

    以下のような回答は評価を上げましょう

    • 正しい回答
    • わかりやすい回答
    • ためになる回答

    評価が高い回答ほどページの上位に表示されます。

  • 回答の評価を下げる

    下記のような回答は推奨されていません。

    • 間違っている回答
    • 質問の回答になっていない投稿
    • スパムや攻撃的な表現を用いた投稿

    評価を下げる際はその理由を明確に伝え、適切な回答に修正してもらいましょう。

  • 2016/05/23 15:02

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

    キャンセル

  • 2016/05/23 16:10

    追記しました。

    キャンセル

  • 2016/05/23 16:24 編集

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

    キャンセル

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

  • ただいまの回答率 90.12%
  • 質問をまとめることで、思考を整理して素早く解決
  • テンプレート機能で、簡単に質問をまとめられる