根據觸發按鈕更改模態內容 - 標題和視頻

如何根據按下的鏈接更改模式的視頻和標題？根據觸發按鈕更改模態內容 - 標題和視頻

我想要改變基於按下的鏈接的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 =’」。謝謝！

我在我的頁面上有多個模態，所有不同，我只想改變基於點擊鏈接的tutorial-modal上的內容。

來源

2017-03-08 Jake

嘗試使用jQuery .attr（）來獲取和設置你的元素屬性。 –

所有元素都應該有唯一的ID。既然你有多個按鈕，你可能只想在那裏使用一個類。

這可以做到純JavaScript，但既然你有jQuery標記，我會回答這個問題。

首先你需要一個click事件：

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

})

然後，你需要的目標，你想

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

元素和最後賦值

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

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

凡this指click事件的背景，這是$(".my_button")被點擊。

來源

2017-03-08 13:31:27 rancor1223

我最終爲每個按鈕使用了ID，因爲它們觸發了它們自己的唯一標題和模式視頻。十分感謝你的幫助！ – Jake

使用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/

來源

2017-03-08 14:05:12

根據觸發按鈕更改模態內容 - 標題和視頻

回答

相關問題