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 ">

我正在尝试使用data-title =“”和data-video =“”并分别用这些替换模态的标题和iframe src =“”。谢谢！

我的页面上有多个模态，所有不同，我只想根据点击的链接更改tutorial-modal上的内容。

Answer 1

所有元素都应具有唯一ID。由于你有多个按钮，你可能只想在那里使用一个类。

这可以通过简单的Javascript来完成，但是由于你有jQuery标记，我会回答。

首先，您需要点击事件：

$(".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")被点击的内容。

Answer 2

使用jQuery，您可以将点击事件附加到所有链接，阅读当前链接数据并更新标题和iframe的视频源。

template<class T>
class dynarray
{
    std::unique_ptr<T[]> data;
    T*                   end; // or size_t size

    //TODO functions
};

查看实际操作：https://jsfiddle.net/petjofi/Lmr2he7u/

根据触发按钮更改模态内容 - 标题和视频

2 个答案: