js给img标签实现双击删除图片

本文介绍了一种使用jQuery实现图片预览并绑定双击删除事件的方法。通过遍历img标签并设置唯一ID,实现了图片的动态管理和交互。代码示例展示了如何在预览图片时添加删除功能。

摘要生成于 C知道 ,由 DeepSeek-R1 满血版支持, 前往体验 >

1、首先在代码加载完之后,遍历一个标签内的所有img标签,给这些标签全都带上“id”
代码参考:https://zhidao.baidu.com/question/2117550140413534267.html

$("#img_box img").each(function(i,e){
	$(this).attr('id','remove_' + i)
})

下面的代码是灵感来源……

obj.preview(function (index, file, result) {
	$(".layui-upload-list").append('<img src="' + result + '" id="remove_' + index + '" title="双击删除该图片" style="width:200px;height:auto;">')

	//console.log(1, index); //得到文件索引
	//console.log(2, file.name); //得到文件对象
	//console.log(3, result); //得到文件base64编码,比如图片
})

2、接下来就是绑定双击删除图片事件

$('#remove_' + index).bind('dblclick', function () {//双击删除指定预上传图片
    delete files[index];//删除指定图片
    $(this).remove();
})

思绪来源于:https://blog.youkuaiyun.com/qq_36894527/article/details/89385264

评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值