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

【问题标题】：Changing modal content based on trigger button - Title and video根据触发按钮更改模态内容 - 标题和视频
【发布时间】：2017-03-08 12:33:57
【问题描述】：

如何根据按下的链接更改模态框的视频和标题？

我要根据点击的链接更改的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 上的内容。

【问题讨论】：

尝试使用 jquery .attr() 来获取和设置元素的属性。

标签： javascript jquery html twitter-bootstrap

【解决方案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")。

【讨论】：

我最终为每个按钮使用了 ID，因为它们触发了自己独特的标题和模态视频。非常感谢您的帮助！

【解决方案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/

【讨论】：