JS 多图片绑定点击事件

最新推荐文章于 2023-08-08 00:14:46 发布

如漩涡

最新推荐文章于 2023-08-08 00:14:46 发布

阅读量5.2k

点赞数

分类专栏：工作中的开发思路文章标签： js

本文链接：https://blog.csdn.net/m0_37701381/article/details/90606632

版权

工作中的开发思路专栏收录该内容

30 篇文章 5 订阅

订阅专栏

JS 多张图片存在一个页面时，公用一个class，实现显示出不同图片效果

本篇文章主要记录一下做项目时，对循环出来的图片进行点击遇到的难题。

看一下HTML

            <div class="layui-form-item">
                <div class="layui-inline">
                    <label class="layui-form-label">LOGO</label>
                    <div class="layui-upload">
                        <div class="layui-upload-list">
                            <#if companyDTO.logoImage?? && (companyDTO.logoImage?size > 0)>
                                <#list companyDTO.logoImage as logoImage>
                                    <img class="layui-upload-img  img-click-class"
                                         style="width: 100px; height: 100px"
                                         src="${logoImage.url}">
                                </#list>
                            </#if>
                        </div>
                    </div>
                </div>
            </div>

    //对每个图片上class为img-click-class的元素进行点击事件的绑定
    $(function () {
        $(".img-click-class").on("click", function (dom) {
        	//这个dom对象里包括了当前点击的对象值
            console.log($(dom.currentTarget).attr("src"));
            $("#showImage").attr("src", $(dom.currentTarget).attr("src"));
            layer.open({
                type: 1,
                title: false,
                shadeClose: true,
                area: '600px',
                shade: 0.5,
                closeBtn: 0,
                skin: 'layui-layer-nobg', //没有背景色
                shadeClose: true,
                content: $("#showImage")
            });
        })

    });