クリックで発生するイベントをdivごとに分けたい

クリックで発生するイベント（クラスの取得）をdivごとに分けたいのですが、
どうしたらいいかわかりません。ご教示願います。

<html>
<head>
    <style>
        .video-frame {
            position: relative;
            width: 100%;
            overflow: auto;
            -webkit-overflow-scrolling: touch;
            border: 1px solid #ccc;

        }

        .video-frame__video--click {
            padding-top: 56.25%;
            position: relative;
            width: 100%;
            overflow: auto;
            -webkit-overflow-scrolling: touch;
            border: 1px solid #ccc;

        }

        .video-frame__video--click iframe {
            position: absolute;
            top: 0;
            left: 0;
            width: 100%;
            height: 100%;
            border: none;
            display: block;
        }

        .video-frame img {
            max-width: 994px;
            width: 100%;
        }
    </style>
    <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.4.1/jquery.min.js"></script>
</head>

<body>
    <!-- ビデオ１-->
    <div class="video-frame">
        <div class="video-frame__video"  youku="URL1">
            <img src="img1.jpg" alt="video02"
                width="100%" height="auto">
        </div>
    </div>

    <!-- ビデオ2-->
    <div class="video-frame">
        <div class="video-frame__video"  youku="URL2">
            <img src="img2.jpg" alt="video02"
                width="100%" height="auto">
        </div>
    </div>

    <script>
        $('.video-frame__video').click(function () {
            var vframe = '<iframe src="' + $(this).attr('youku') + '" frameborder="0" allowfullscreen></iframe>';
            $(this).replaceWith(vframe);
            $('.video-frame').attr('class', 'video-frame__video--click');
            /*　↑これでは、クリックすると、ビデオ１、ビデオ２両方のクラスが変更されてしまう。
            ビデオ１をクリックしたらビデオ1が、ビデオ２をクリックしたらビデオ２のクラスが変更されるようにしたい
            */
        });
    </script>

</body>
</html>

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

回答2件

ベストアンサー

javascript
1$(function(){
2  $('.video-frame__video').on('click',function(){
3    $(this).closest('.video-frame').addClass('video-frame__video--click').removeClass('video-frame');
4    var vframe = '<iframe src="' + $(this).attr('youku') + '" frameborder="0" allowfullscreen></iframe>';
5    $(this).replaceWith(vframe);
6  });
7});

投稿2019/11/26 08:51

編集2019/11/26 08:54

yambejp

総合スコア114839

yambejp

2019/11/26 08:53 編集

.attr()でclassを置き換えるのはあまりやらない処理単にaddClassすればいいのか、既存のvideo-frameクラスを外さないといけないのかわかりません

KoTT

2019/11/26 09:03 編集

ありがとうございます。どうなっているのかわからないですが、まるっとコピペすると、目的の挙動ができました！

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

$('.video-frame')⇒$(this).parent()

投稿2019/11/26 08:45

kei344

総合スコア69407

KoTT

2019/11/26 09:02

ありがとうございます。分岐ができました。ただ今度は、クリック後の.video-frame__video--click　の取得がうまくいきませんでした。

kei344

2019/11/26 09:24

提示されているコードに無いので、別の（新しい）問題では？ yambejpの回答で解決されたようなので、ひとまずこの回答は「ベストアンサー」を選び「解決済」にされてはいかがでしょうか。

KoTT

2019/11/26 09:27

承知しました。ご教示ありがとうございました。

yambejp

2019/11/26 09:33

> クリック後の.video-frame__video--click　の取得リプレースしてしまうのでthisである該当する「.video-frame」がすでに本来親である「.video-frame」から除外されているから $(this).parent()をやっても「.video-frame」にたどり着けないだけです。対応としてreplaceWithする前に親への処理はやってしまうことです（順番だけの問題）

kei344

2019/11/26 11:07

To: yambejpさんそこのことですか。「クリック後」なので別の処理をされているのかと思いました。 To: KoTTさん「別の（新しい）問題」ではなかったようです、すみません。

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

あなたの回答