相关文章推荐
成熟的春卷  ·  动态生成元素点击事件绑定:jQuery的$( ...·  1 月前    · 
曾深爱过的消炎药  ·  Table 2 ...·  5 月前    · 
腹黑的领带  ·  OPPO 發表A系列首款AI手機A3 ...·  8 月前    · 
害羞的帽子  ·  Annapolis Cap Sleeve ...·  9 月前    · 
含蓄的铁板烧  ·  问题反馈:PostgreSQL分页异步查询分 ...·  10 月前    · 
不拘小节的自行车  ·  文藻數位校史館 -- 文藻溯源數位展覽館·  1 年前    · 
Code  ›  JS实现动态获取当前点击事件的id属性值开发者社区
软件 按钮 js代码 动态
https://cloud.tencent.com/developer/article/2179801
刀枪不入的马铃薯
2 年前
作者头像
Lcry
0 篇文章

JS实现动态获取当前点击事件的id属性值

前往专栏
腾讯云
开发者社区
文档 意见反馈 控制台
首页
学习
活动
专区
工具
TVP
文章/答案/技术大牛
发布
首页
学习
活动
专区
工具
TVP
返回腾讯云官网
社区首页 > 专栏 > Lcry个人博客 > 正文

JS实现动态获取当前点击事件的id属性值

发布 于 2022-11-29 20:37:58
5K 0
举报

这段时间一直在写java期末项目作业,然后自己打算把影视站用java实现出来,前端用ajax调用进行填充,然后一直困惑我的问题在此时此刻终于解决,本来是前端做的事,像我这个前端菜B来说,这个问题真是难了我一下午加一个晚上,不过还好解决了,特此记录一下。

原本要实现的功能如下: 点击下图播放按钮,要弹窗播放对应的视频链接。

整个页面是通过ajax请求最新的4部视频进行填充完成,视频列表又是通过 template-web.js 插件补上去的,所以导致所有ID值都是一样的,一开始给按钮添加一个事件,结果是所有播放按钮都是播放第一个视频!于是,想了好多办法,又把ID属性给弄成动态的ajax请求的属性值,实现了每个id不一样,接下来,因为点击播放要调用一个方法,进行解析视频播放,拼接成 API+视频链接 的格式在新打开的弹窗进行展示。具体可以看下图:

要实现点击不同按钮,并且按钮ID是动态从ajax请求获取的,还要添加点击视频拼接视频链接,参考了文章,可以获取点击按钮的id值,然后使用button,将链接放在value中

Dom对象的id属性可以获取元素的id值。关键代码如下:

<!-- HTML结构 -->
<button id="testid" type="button" onclick="play(this)" value="动态获取id值">播放</button>
// javascript代码
function play(obj){
alert(obj.id)
}

最后改造我的代码,最后实现,完成拼接。用的layui

<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');
 
推荐文章
成熟的春卷  ·  动态生成元素点击事件绑定:jQuery的$(document).on写法对应的原生JavaScript实现方案
1 月前
曾深爱过的消炎药  ·  Table 2 Age-standardized mortality rates (ASMRs) per 100,000 person-years at risk for selected cause
5 月前
腹黑的领带  ·  OPPO 發表A系列首款AI手機A3 Pro ! | OPPO 台灣
8 月前
害羞的帽子  ·  Annapolis Cap Sleeve Polo Dress in Tiki Bar Is Open Purple – Katherine Way
9 月前
含蓄的铁板烧  ·  问题反馈:PostgreSQL分页异步查询分区表当查询结果大于1.5W行时前N页加载很慢 - SqlSugar - .Net果糖网
10 月前
不拘小节的自行车  ·  文藻數位校史館 -- 文藻溯源數位展覽館
1 年前
今天看啥   ·   Py中国   ·   codingpro   ·   小百科   ·   link之家   ·   卧龙AI搜索
删除内容请联系邮箱 2879853325@qq.com
Code - 代码工具平台
© 2024 ~ 沪ICP备11025650号