JavaScipt30(第十个案例)(主要知识点:选中一个数组中间相连部分进行操作的一种思路)
承接上文,第九个案例就不说了,是控制台的一些东西,一般用的很少,了解下就行了,想用的时候再翻api。这是第10个案例:
需要实现的效果是:点击一个checkbox,然后按下shift点击另一个checkbox,将两个checkbox之间的checkbox全部选中。
附上项目链接: https://github.com/wesbos/JavaScript30
源码如下,我将觉得应该记录的点做了备注:
/* 这个一般用的不多的人很难想到直接样式实现 */
/* checkbox选中时 用相邻兄弟选择器将旁边的p元素画上穿过文本下的一条线*/
input:checked + p {
background: #F9F9F9;
text-decoration: line-through;
}
<script>
const checkboxes = document.querySelectorAll('.inbox input[type="checkbox"]'); // 记录下上一次点击的checkbox,这个是我做的时候没想到的,我当时做的时候想的是去找这些checkbox里面选中的最前面那个.
let lastChecked; function handleCheck(e) {
// 定个flag,用于判断checkbox选中
let inBetween = false;
// e.shiftKey这个我原来是不知道的,以为要监听键盘事件才能知道是不是按了shift,走了弯路
if (e.shiftKey && this.checked) {
checkboxes.forEach(checkbox => {
// 循环一路走, 当前选中的checkbox与上次选中的,只会进入两次if,不管是从shift从上往下选还是从上往下选,第一次进去inBetween变成true,
// 第二次出来inBetween变成false,只有当前checkbox与lastChecked之间的inBetween才会为true,所以选中了两个checkbox之间的所有checkbox,很精妙
if (checkbox === this || checkbox === lastChecked) {
inBetween = !inBetween;
}
if (inBetween) {
checkbox.checked = true;
}
});
} lastChecked = this;
} checkboxes.forEach(checkbox => checkbox.addEventListener('click', handleCheck));
</script>
JavaScipt30(第十个案例)(主要知识点:选中一个数组中间相连部分进行操作的一种思路)的更多相关文章
- JS案例之8——从一个数组中随机取数
近期项目中遇到一个需求,从一个列表中随机展示列表的部分内容,需求不大,JS也非常容易实现.主要是运用到了Math对象的random方法,和Array的splice方法. 思路是先新建一个数组,存放所有 ...
- JS判断一个数组中是否有重复值的三种方法
方法一: var s = ary.join(",")+","; for(var i=0;i<ary.length;i++) { if(s.replace( ...
- 使用Jquery+EasyUI进行框架项目开发案例解说之中的一个---员工管理源代码分享
使用Jquery+EasyUI 进行框架项目开发案例解说之中的一个 员工管理源代码分享 在開始解说之前,我们先来看一下什么是Jquery EasyUI?jQuery EasyUI是一组基于jQuery ...
- android 案例:从另一个activity选择信息并获取返回值
主窗口: package com.example.test; import android.app.Activity; import android.app.AlertDialog; import a ...
- 【案例】舒邑:一个女装品牌的奇葩打法-@i黑马
[案例]舒邑:一个女装品牌的奇葩打法-@i黑马 [案例]舒邑:一个女装品牌的奇葩打法
- input的选中与否以及将input的value追加到一个数组里
html布局 <div class="mask"> //每一个弹层都有一个隐藏的input <label> <input hidden="& ...
- jquery 实现只能选中一个checkbox,选中当前的去除上一个
jq 实现只能选中一个checkbox,选中当前的去除上一个. <div id="checkboxed"> <input name="check1&qu ...
- JQuery 实现多个checkbox 只选中一个
<!DOCTYPE HTML> <html> <head> <meta http-equiv="Content-Type" content ...
- Vue Echarts 饼图设置默认选中一个
Vue Echarts 饼图设置默认选中一个 myChart.setOption(data) // data伟echarts所需要传入的参数,就是配置参数最多的那个玩意 myChart.dispatc ...
随机推荐
- Hibernate学习笔记(六) — Hibernate的二级缓存
我们知道hibernate的一级缓存是将数据缓存到了session中从而降低与数据库的交互.那么二级缓存呢? 一.应用场合 比方.在12306购票时.须要选择出发地与目的地,假设每点一次都与数据库交互 ...
- Android实战技巧之八:Ubuntu下切换JDK版本【转】
本文转载自:http://blog.csdn.net/lincyang/article/details/42024565 Android L之后推荐使用JDK7编译程序,这是自然发展规律,就像是4年前 ...
- Android系统定制----删除系统锁屏功能【转】
本文转载自:http://blog.csdn.net/morixinguan/article/details/56675914 frameworks/base/packages/SettingsPro ...
- Linux微信web开发者工具
Linux微信web开发者工具 https://github.com/cytle/wechat_web_devtools Linux微信web开发者工具, 可在 linux 桌面环境跑起 微信开发者工 ...
- [IOI2005]Riv 河流
https://www.zybuluo.com/ysner/note/1300088 题面 有一棵\(n\)个点的树,现在在上面放\(k\)个标记,使得每个点的权值乘上自己到最近的标记祖先的距离的和最 ...
- MSD3458开发资料
MSD3458HB是mstar最新推出的普通4K数字电视解决方案,不带操作系统,是一个低成本的4K方案,156脚的LQFP普通封装,开发难度低,支持HDMI2.0输入,支持4K输出.1. Suppor ...
- linux下的C语言开发 GDB的例子
在很多人的眼里,C语言和linux常常是分不开的.这其中的原因很多,其中最重要的一部分我认为是linux本身就是C语言的杰出作品.当然,linux操作系统本身对C语言的支持也是相当到位的.作为一个真正 ...
- Linux 下編輯 PDF 檔的工具(PDF editor under Linux)(转载)
转自:http://www.gtwang.org/2011/05/linux-pdf.html PDF 檔雖然是一個跨平台的檔案格式,但 Adobe 只有提供免費的 Adobe Reader,要看 P ...
- MySQL权限及登陆、退出方法
用户权限列表 SELECT 查询权限 INSERT 插入权限 UPDATE 更新权限 DELETE 删除权限(用于删除数据) CREATE 创建权限 DROP 删除权限(用户删除文件) RELOAD ...
- bzoj 4424: Cf19E Fairy && codeforces 19E. Fairy【树形dp】
参考:https://blog.csdn.net/heheda_is_an_oier/article/details/51131641 这个找奇偶环的dp1真是巧妙,感觉像tarjan一样 首先分情况 ...