实现点击添加对应图片及删除图片

下面要实现的就是点击下方cat、dog、pig、monkey，展示对应的图片，点击图片上的删除按钮，图片删除后，下方对应的恢复初始样式

<div id="wrapper"><!-- 图片显示区域 --><div id="viewImg"></div><!-- 底部点击控制区域 --><ul id="footer"><li data-id="cat">cat</li><li data-id="dog">dog</li><li data-id="pig">pig</li><li data-id="monkey">monkey</li></ul>
</div>

/*** 声明变量为false，利用其状态值判断是否存在与其对应的图片* 若值为false，则添加，* 若值为true，则不追加* */let isCat = false;let isDog = false;let isPig = false;let isMonkey = false;/*** 底部点击li事件* 显示对应图片，及点击的li标签添加点击选中样式* */
$("#footer li").click(function(e){$(e.target).css({"color":"red","borderBottom":"4px solid cyan"})const currentLi = $(e.target).data("id");if(currentLi == "cat"){if(!isCat){$("#viewImg").append(cat)// 将其状态设置为true，表示已存在isCat = true;/*** 调用删除图片方法* */deletImg("cat")}else{return}}else if(currentLi == "dog"){if(!isDog){$("#viewImg").append(dog)isDog = true;deletImg("dog")}else{return}}else if(currentLi == "pig"){if(!isPig){$("#viewImg").append(pig)isPig = true;deletImg("pig")}else{return}}else{if(!isMonkey){$("#viewImg").append(monkey)isMonkey = true;deletImg("monkey")}else{return}}
})/* 四张图片 */
let cat =`<div id="cat"><button>X</button><img src="../img/cat.jpg" ></div>` let dog =`<div id="dog"><button>X</button><img src="../img/dog.jpg" ></div>` let pig =`<div id="pig"><button>X</button><img src="../img/pig.jpg" ></div>` let monkey =`<div id="monkey"><button>X</button><img src="../img/monkey.jpg" ></div>`    /*** 点击图片右上方删除按钮* 删除对应图片，及删除对应图片的li标签恢复初始样式* */
function deletImg(ele){$(`#${ele} button`).click(function(){$("#"+ele).remove()if(ele === "cat"){isCat = false;}else if(ele === "dog"){isDog = false;}else if(ele === "pig"){isPig = false;}else{isMonkey = false;}$.each($("#footer li"),function(index,item){if($(item).data("id") === ele){$(item).css({"borderBottom":"none","color":"#fff"})}})})
}

实现点击添加对应图片及删除图片相关推荐

视频直播源码，插入图片、删除图片、设置图片大小、提取图片
视频直播源码,插入图片.删除图片.设置图片大小.提取图片 1.插入图片 Document对象有一个add_paragraph()方法插入图片,只需要传入路径或者字节流即可,实际上它也是调用段落的Run ...
微信小程序 - 选择图片、预览图片、删除图片
为什么80%的码农都做不了架构师?>>> 小程序开发中你可能会遇到上传的图片首先会选择图片之后预览看下或者不满意需要删除图片,才会提交吧,这样应该是一个比较好的处理方式. 微信 ...
summernote富文本编辑器实现图片添加上传和删除图片
summernote的基本使用 HTML代码 //div添加个id就可以 <div id="summernote" ></div> 然后JS操作 //实例化 ...
python根据url list多线程下载图片、删除图片目录
看到很多个版本多线程下载图片,自己改了改,主要是异常以及urlretrieve的使用 import time from multiprocessing.pool import ThreadPool i ...
java替换图片中文字_Java 添加、替换、删除Word中的图片
文档中,可以通过图文混排的方式来增加内容的可读性,相比纯文本文档,在内容展现方式上也更具美观性.在给文档添加图片时,可设置图片的文本环绕方式.旋转角度.图片高度/宽度等:另外,也可对文档中已有的图片实 ...
【微信小程序云开发】1分钟学会实现上传、下载、预览、删除图片，并且以九宫格展示图片
大家好,我叫小秃僧这篇文章是讲解云开发如何上传.下载.预览.删除图片,并且以九宫格展示图片的功能学习目录 1. 实现效果 2.JavaScript代码 3.wxml代码 4.wxss代码 1. 实 ...
微信小程序——选择图片，上传图片，点击查看大图，删除图片
Page({data: {images: [],count: 3, //设置最多三张图片},chooseImage: function () {var self = this;var images = ...
pdf覆盖图片 Java_Java 添加、替换、删除PDF中的图片的示例代码
概述本文介绍通过java程序向PDF文档添加图片,以及替换和删除PDF中已有的图片.另外,关于图片的操作还可参考设置PDF 图片背景.设置PDF图片水印.读取PDF中的图片.将PDF保存为图片等文章 ...
el-upload回显细节--没有图片数据返回的时候每点击一次添加多了一个空白图片
如果没有图片,就会自动赋值一个空的值给这个数组,就会出现一个空白的照片,每点击一次就添加一个,肯定有个地方有问题,一起来看看那是因为回显的时候做了初始化,没有进行判断是否有值再添加. imgInit ...

实现点击添加对应图片及删除图片

实现点击添加对应图片及删除图片相关推荐

最新文章

热门文章