jQuery动态拼接多张图片并且获取每张图片名称
王小婷
发布于 2025-05-19 08:25:16
发布于 2025-05-19 08:25:16
代码可运行
运行总次数：0
代码可运行
5640239-28d087275ac6fe52.png
1：动态拼接图片，按照顺序渲染图片 2：点击图片，将获取的图片路径进行分割，获取图片名称。
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title></title>
<style>
.onimg{
background: #dae0e7;
}
.potCont{
width:600px;
}
</style>
</head>
<body>
<div class="form-group">
<label>图标</label>
<div class="potCont">
</div>
</div>
</body>
<script src="https://code.jquery.com/jquery-3.1.1.min.js"></script>
<script>
showImg();
function showImg() {
var total = 42;
var html = '';
for (var i = 0; i < total; i++) {
html += '<img class="potimg" src="images/pot/' + (i + 1) +
'.png">';
}
$(".potCont").html(html)
}
$(".potimg").on("click",function() {
$(this).addClass("onimg").siblings().removeClass("onimg");
var img = $(this).prop("src");
img = img.slice(img.lastIndexOf("/") + 1, img.lastIndexOf('.png'));
alert(JSON.stringify(img))
})
</script>
</html>本文参与 腾讯云自媒体同步曝光计划，分享自作者个人站点/博客。
原始发表：2020-03-20，如有侵权请联系 cloudcommunity@tencent.com 删除
评论
登录后参与评论
暂无评论
推荐阅读
相关推荐
JQuery 实现开发常用功能
更多 >
交个朋友
加入腾讯云官网粉丝站
蹲全网底价单品 享第一手活动信息
腾讯云开发者
