首页 › 开发帮助文档 › 开发技术 › jQuery动态拼接多张图片并且获取每张图片名称 ...

[jQuery] jQuery动态拼接多张图片并且获取每张图片名称

开发技术发布于：2021-07-30 18:39 | 阅读数：272 | 评论：0

1487 主题	0 回帖	1537 积分

网站编辑

积分: 1537

发消息

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>

免责声明：

1. 本站所有资源来自网络搜集或用户上传，仅作为参考不担保其准确性！

2. 本站内容仅供学习和交流使用，版权归原作者所有！© 查看更多

3. 如有内容侵害到您，请联系我们尽快删除，邮箱：kf@codeae.com

分享到： QQ好友和群 QQ空间

返回列表

江南才子 LV4

1537 经验

1487 文档

[jQuery] jQuery动态拼接多张图片并且获取每张图片名称

相关帖子

WordPress怎么获取当前页面URL地址

常用jquery右健禁止命令

uni-app 利用canvas画简单海报并保存图片

php使用GD库创建图片缩略图的方法

7种好看的鼠标点击效果

解决编辑器图片插入多次但发布后只显示一次问题

Discuz应用中心恢复授权的方法

使用原生querySelectorAll和forEach来实现点击切换

阿里云盘获取refresh_token方法

江南才子 LV4