专栏首页编程微刊jQuery动态拼接多张图片并且获取每张图片名称

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

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>

本文参与腾讯云自媒体分享计划,欢迎正在阅读的你也加入,一起分享。

我来说两句

0 条评论
登录 后参与评论

相关文章

  • Jquery前端分页插件pagination使用

    王小婷
  • Jquery+Ajax+Bootstrap Paginator实现分页的拼接

    王小婷
  • 使用bootstrap的栅栏实现五列布局

    我们知道,在使用Bootstrap栅格的时候,我们可以对网页方便的进行模块分割。Bootstrap 包含了一个响应式的、移动设备优先的、不固定的网格系统,可以随...

    王小婷
  • 解决img父元素高度多出3px

      结果运行之后发现,不管是在移动端还是pc端,都会出现这种问题。刚开始以为是父元素初始化了margin和padding的原因,排查css无果,又怀疑是html...

    csxiaoyao
  • js设计模式之惰性单例模式

    <html> <body> <button id="loginBtn">登录</button> </body> <script> var cr...

    吴裕超
  • 常见的实体字符

    河湾欢儿
  • TensorFlow学习笔记--Deep Dream模型

    Deep Dream是谷歌推出的一个有意思的技术。在训练好的CNN上,设定几个参数就可以生成一张图象。具体目标是:

    喵叔
  • 学AI哪家强?2019全球排行清华第1,北大第2

    导读:2019年过去了,21世纪10年代也过去了。马萨诸塞大学计算机与信息科学学院教授Emery Berger发布的CSRanking项目,是全球院校计算机科学...

    华章科技
  • 前端技巧——js篇

    流眸
  • 高效能办公——Excel提取超文本链接

    提取超链接: 宏:alt+f11 插入模板 修改A1:A21:为选区范围根据实际情况调整 f5

    瑞新

扫码关注云+社区

领取腾讯云代金券