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

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

我想根据按下的链接更改的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=分别替换modal的title和iframe src=。谢谢大家!

---

我的页面上有多个模式，都不同，我只想根据单击的链接更改教程模式的内容。

所有元素都应该有唯一的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") 
    );
})

---

这是指点击事件的上下文，即点击的$.my_按钮。

使用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); 

})

---

在实际操作中查看：

尝试使用jquery.attr来获取和设置元素的属性。我最终为每个按钮使用了ID，因为它们会为模式触发自己独特的标题和视频。非常感谢你的帮助！