之前工作中有一个需求,就是在一堆图片列表中,点击具体的图片,并从界面移除;点击具体的图片,下载;这是一个思路

<style type="text/css" media="screen">
.box {
width: 50px;
height: 60px;
margin: 5px 0;
}
.box:nth-child(1) {
background: red;
}
.box:nth-child(2) {
background: blue;
}
.box:nth-child(3) {
background: red;
}
.box:nth-child(4) {
background: pink;
}
</style>
<body>
<div class="father">
<div class="box">1</div>
<div class="box">2</div>
<div class="box">3</div>
<div class="box">4</div>
</div>
<button type="button" class="btn">删除</button>
<script src="https://cdn.bootcss.com/jquery/3.3.1/jquery.js"></script>
<script>
$(function() {
var deleteIndex=0;
$(".box").click(function() {
console.log($(this).index());
deleteIndex = $(this).index();
$(this).siblings().css({"border":"none"});
// $(this).css({"border-width":"1px","border-style":"solid","border-color":"yellow"});
$(this).css({"border":"10px solid yellow"});
});
$(".btn").click(function() {
// $("father").find[]
$(".father").find(".box")[deleteIndex].remove();
});
});
</script>
</body>

最新文章

  1. mysql不能插入中文
  2. fullpage 插件学习心得
  3. 使用my exclipse对数据库进行操作(3)
  4. web项目 验证码 *** 最爱那水货
  5. 简单研究Android View绘制一 测量过程
  6. 读书笔记:Sheldon Ross:概率论基础教程:随机变量
  7. redis专题--slow log详解
  8. 【转】2-SAT题集
  9. 在Ubuntu下卸载Apache
  10. 正则表达式从右往左进行匹配(Regex)
  11. xhEditor入门基础
  12. 零基础HTML编码学习笔记
  13. Think In Java_读书笔记_042516
  14. C#操作Excel(读取)
  15. delete操作字符串会报错吗?
  16. jquery之商城菜单
  17. Linux系统更改默认Python版本
  18. python gpio
  19. php----函数大全
  20. poj 2187 Beauty Contest , 旋转卡壳求凸包的直径的平方

热门文章

  1. Findbugs分析工具介绍
  2. ubuntu16.04下编译安装OpenCV
  3. RabbitMQ学习笔记(4)----RabbitMQ Exchange(交换机)的使用
  4. Bootstrap 有一个 class 属性叫做 well,它的作用是为设定的列创造出一种视觉上的深度感
  5. 企业级任务调度框架Quartz(5) Quartz的声明式配置
  6. Javase 简单代码练习
  7. 移动端开发-Day1
  8. 序列模型(2)-----循环神经网络RNN
  9. class一些内置方法
  10. 【ACM-ICPC 2018 沈阳赛区网络预赛 I】Lattice&#39;s basics in digital electronics