JS 多图片绑定点击事件

缺乏、安全感 2022-01-26 00:13 713阅读 0赞

# 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>

JS

//对每个图片上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")
                });
            })
    
        });

发表评论取消回复

表情：

评论列表（有 0 条评论，713人围观）

还没有评论，来说两句吧...

相关阅读

相关 android绑定点击事件的四种方法

1.内部类作为事件监听器 2.匿名内部类作为事件监听器（没有名字的内部类，只能使用一次） 3.activity本身作为事件监听器 4.xml文件中控件下android：o

小灰灰/ 2022年09月24日 07:27/ 0 赞/ 188 阅读

相关 vue绑定点击事件

<!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title>docume

今天药忘吃喽~/ 2022年07月13日 09:00/ 0 赞/ 224 阅读

相关 jq动态绑定点击事件

jq动态添加的元素需要添加点击事件可用delegate on添加 1.delegate <div id="box"> </div>

「爱情、让人受尽委屈。」/ 2022年05月20日 06:16/ 0 赞/ 193 阅读

相关小程序绑定点击事件

1.页面添加 bindtap=”purchaseOn” <view class='quick-view-content' bindtap="purchaseOn"

梦里梦外;/ 2022年05月19日 04:36/ 0 赞/ 252 阅读

相关 jquery 创建元素后，绑定点击事件

> 问题 > > 绑定事件发生在 `dom元素加载之前`，出现错误在 `全局加载`完毕后，再来绑定相应的点击事件，会导致失效。 $(document).r

缺乏、安全感/ 2022年05月10日 01:03/ 0 赞/ 266 阅读

相关 JS 多图片绑定点击事件

JS 多张图片存在一个页面时，公用一个class，实现显示出不同图片效果本篇文章主要记录一下做项目时，对循环出来的图片进行点击遇到的难题。看一下HTML

缺乏、安全感/ 2022年01月26日 00:13/ 0 赞/ 714 阅读

相关绑定长按事件，同时绑定点击事件（PC，触摸屏等多设备兼容）

绑定长按事件，同时支持绑定点击事件（PC，移动端均支持） 1. HTML <div> <ul> <li onmous

秒速五厘米/ 2021年12月12日 13:39/ 0 赞/ 247 阅读

相关 js循环添加标签并利用其id绑定点击事件

function removeAdImage(id){ console.log(id) console.log(document.get

柔光的暖阳◎/ 2021年11月16日 19:50/ 0 赞/ 636 阅读

相关 div添加一个点击事件（绑定点击事件）

1、HTML onclick 事件属性 <input type="button" value="点我点我" onclick="ds()"> <script>

喜欢ヅ旅行/ 2021年09月24日 14:40/ 0 赞/ 623 阅读

相关 ElementUI - el-input等组件绑定点击事件

前言 vue使用elementUI的input组件时，添加： <el-input @click="inputClick"> 绑定时间无效解决方法

迷南。/ 2021年07月26日 17:26/ 0 赞/ 857 阅读