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>