javascript - 将数据属性值插入 Iframe src

Question

我有一个数字按钮，按下该按钮会打开一个带有 iframe 的模式。这些按钮具有数据属性，用于存储我想要传递到 iframe scr 的链接。

这是按钮的代码:

<a href="#myModal" style="float: right;" class="btn btn-outline-secondary" data-toggle="modal" data-jobid="index.php?/job/view/1" ><strong>View</strong></a>

<a href="#myModal" style="float: right;" class="btn btn-outline-secondary" data-toggle="modal" data-jobid="index.php?/job/view/2" ><strong>View</strong></a>

<a href="#myModal" style="float: right;" class="btn btn-outline-secondary" data-toggle="modal" data-jobid="index.php?/job/view/3" ><strong>View</strong></a>

这是 iframe 的代码:

<iframe style="display: block; width: 100%; height: 100%; border: none;" src=""></iframe>

我的问题是，每次单击其中一个按钮时，如何将 data-jobid 传递到 iframe 的 src ？

Answer 1

您可以将 click 处理程序 Hook 到 .btn-outline-secondary 元素，然后从中读取 data() 属性设置 iframe 的 src 属性，如下所示:

$('.btn-outline-secondary').click(function() {
  $('iframe').attr('src', $(this).data('jobid'));
});