トリガーボタンに基づいてモーダルコンテンツを変更する - タイトルとビデオ

Question

どのリンクを押したかに基づいてモーダルのビデオとタイトルを変更するにはどうすればよいですか？

src押されたリンクに基づいて変更したいのですがここにあります。

<iframe width="853" height="480" src=" Link's URL here " allowfullscreen></iframe> 

タイトルはこちらです。

<h4 class="modal-title" id="tutorial-modal"> Link's title here </h4> 

ボタンは次のように書かれています。

<a href="#" data-toggle="modal" data-target="#tutorial-modal" data-title=" The title for this link " data-video=" URL For the video for this link "> 

は、私がデータタイトル=「『とデータ・映像を=』取る 『と、それぞれこれらとモーダルのタイトルとiframe SRC =』」を交換しようとしています。ありがとうございました！

私は自分のページに複数のモーダルを持っていますが、私はクリックしたリンクに基づいてチュートリアルモーダルでコンテンツを変更したいだけです。

Answer 1

すべての要素には一意のIDが必要です。複数のボタンがあるので、そこにクラスを1つだけ使用することもできます。

これはプレーンなJavascriptですが、jQueryをタグ付けしているので、私はそれに答えます。

まずあなたがクリックイベントを必要とする：

$(".my_button").on('click', function(){ 

}) 

は、その後、あなたが

$("#my_h4") 
$("#my_iframe") 

そしてthisが参照する最後の割り当て値

$(".my_button").on('click', function(){ 
    $("#my_h4").text( 
     $(this).attr("data-title") 
    ); 

    $("#my_iframe").attr(
     "src", 
     $(this).attr("data-video") 
    ); 
}) 

をしたい要素をターゲットにする必要がありますclickイベントのコンテキスト（）クリックされた。

Answer 2

jQueryを使用すると、すべてのリンクにクリックイベントを追加し、現在のリンクデータを読み込み、タイトルとiframeのビデオソースを更新できます。

$("a").on('click', function(){ 
    event.preventDefault(); 
    var title = $(this).attr("data-title"), 
     src = $(this).attr("data-video"); 

    $("#tutorial-modal").html(title); 
    $("iframe").attr('src', src); 

}) 

アクションでそれを参照してください。https://jsfiddle.net/petjofi/Lmr2he7u/