江南才子 发表于 2021-7-30 18:39:05

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>




文档来源：51CTO技术博客https://blog.51cto.com/u_15315508/3208218
页: [1]
查看完整版本: jQuery动态拼接多张图片并且获取每张图片名称