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>
