将变量传递给jquery模式弹出窗口

Question

我有一个从mysql数据库拉出的url列表，需要传递一个特定的url，即选择到jQuery模态窗口。我的问题是我无法弄清楚如何传递数据并在jQuery模式div中显示它。下面是我的代码

<table class="table responsive">
<thead><th>Topic</th><th></th></thead>
<tbody>
<tr>
<td>Phone System</td>
<td>
<button type="button" class="btn btn-default vidurl" data-videourl="https://foobar.s3.amazonaws.com/fake/url/vid.webm" data-toggle="modal" data-target="#modal-default">View Video</button>
</td>
</tr>
<tr>
<td>Ticket System</td>
<td>
<button type="button" class="btn btn-default vidurl" data-videourl="https://foobar.s3.amazonaws.com/fake/url/ticketvidinfo.webm" data-toggle="modal" data-target="#modal-default">View Video</button>
</td>
</tbody>
</table>
<div class="modal fade" id="modal-default">
<div class="modal-dialog">
<div class="modal-content">
<div class="modal-header">
<h4 class="modal-title">Training Video</h4>
<button type="button" class="close" data-dismiss="modal" aria-label="Close">
<span aria-hidden="true">&times;</span>
</button>
</div>
<div class="modal-body">
<span class="viddata">what to show the video url here </span>
</div>
<div class="modal-footer justify-content-between">
<button type="button" class="btn btn-default" data-dismiss="modal">Close</button>
</div>
</div>
<!-- /.modal-content -->
</div>
<!-- /.modal-dialog -->
</div>
<!-- /.modal -->
<!-- below is my attempt to get the data from the button that was clicked and then set it as a variable and then make it load in a span inside the modal -->
<script>
$(document).ready(function(){
$(".vidurl").click(function(){
var vidurl = $('.vidurl').data(videourl);
$('.viddata').text(videourl);
console.log(videourl);
});
});
</script>

Answer 1

您没有完全正确地使用data属性。Data为自定义属性。像data-mycustomname一样使用它。然后你可以像$(selector).data("mycustomname")一样在jQuery中访问。

<button type="button" class="btn btn-default vidurl" data-url="https://foobar.s3.amazonaws.com/fake/url/vid.webm" data-toggle="modal" data-target="#modal-default">View Video</button>

然后在jQuery 中

var vidurl = $('.vidurl').data("url");

html data-* attribute

jQuery data()方法