这段时间一直在写java期末项目作业，然后自己打算把影视站用java实现出来，前端用ajax调用进行填充，然后一直困惑我的问题在此时此刻终于解决，本来是前端做的事，像我这个前端菜B来说，这个问题真是难了我一下午加一个晚上，不过还好解决了，特此记录一下。
原本要实现的功能如下： 点击下图播放按钮，要弹窗播放对应的视频链接。
整个页面是通过ajax请求最新的4部视频进行填充完成，视频列表又是通过template-web.js插件补上去的，所以导致所有ID值都是一样的，一开始给按钮添加一个事件，结果是所有播放按钮都是播放第一个视频！于是，想了好多办法，又把ID属性给弄成动态的ajax请求的属性值，实现了每个id不一样，接下来，因为点击播放要调用一个方法，进行解析视频播放，拼接成API 视频链接的格式在新打开的弹窗进行展示。具体可以看下图：
要实现点击不同按钮，并且按钮ID是动态从ajax请求获取的，还要添加点击视频拼接视频链接，参考了文章，可以获取点击按钮的id值，然后使用button，将链接放在value中
Dom对象的id属性可以获取元素的id值。关键代码如下：
代码语言：javascript复制<!-- HTML结构 -->
<button id="testid" type="button" onclick="play(this)" value="动态获取id值">播放</button>// javascript代码
function play(obj){
alert(obj.id)
}
最后改造我的代码，最后实现，完成拼接。用的layui
代码语言：javascript复制<button id="{{dId}}" type="button" onclick="play(this)" value="{{dUrl}}" class="layui-btn-sm layui-btn layui-btn-radius layui-btn-warm">function play(obj){
var bfurl = obj.value;
console.log("播放地址为:" bfurl "id：" obj.id);
var api="视频解析接口XXX";
layui.use(['element', 'form', 'layer'], function() {
var element = layui.element,
$ = layui.jquery,
form = layui.form,
upload = layui.upload,
layer = layui.layer;
layer.open({
type: 2
,title: "播放界面"
,content: [api bfurl, 'no']
,area: ['1060px', '640px']
,maxmin: true
,closeBtn: 1
,success: function(layero, index){
$('iframe').attr('allowfullscreen','true');
}
});
});
}参考文章： https://zhidao.baidu.com/question/60814475.html https://blog.csdn.net/liufeilong_sean/article/details/20120555 https://blog.csdn.net/qq_40557339/article/details/79019843
