js问题：按住shift键选中多个文件，而且不仅仅如此。
就是在网页上模拟windows的文件多选效果，类似于百度云里面的多文件选中。需求如下（见下图）：
- 单击某一图片，选中该图片，再次单击，取消选中
- 单击2图，2图被选中，按住shift，单击6图，2~6图都被选中，shift按住不放，单击4图，2~4图被选中，5、6图取消选中，shift按住不放，再次单击8图，那么2~8图都应该被选中
- 单击2图，2图被选中，按住shift，单击6图，2~6图都被选中，松开shift，单击10图，10图被选中，按住shift，单击12图，2~6图依然保持选中效果，并将10~12图都选中
1和2的功能已经实现了，见下方代码，直接粘贴到一个文件打开就可看到效果。但是第3个需求不知道怎么弄，第2个和第3个需求一个弄好了另外一个就废了。真蛋疼！求大神赐教。
展开
收起
1
条回答
写回答
写回答
-
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en"> <head> <meta http-equiv="Content-Type" content="text/html; charset=utf-8"/> <title>keyMulSelect</title> <style type="text/css"> #main { width: 1150px; height: 780px; border: 1px solid #e7e81a; margin: auto; } p { float: left; width: 150px; height: 150px; border: 1px dotted grey; margin: 19px; } p[sel = "sel"] { border: 1.8px solid red; } </style> <script type="text/javascript" src="http://apps.bdimg.com/libs/jquery/1.9.0/jquery.min.js"></script> <script type="text/javascript"> $(function () { var start = null; $("p").click(function (e) { e = e || event; if (e.shiftKey) { var si = $(start).index(), ti = $(this).index(); var sel = $("p").slice(Math.min(si, ti), Math.max(si, ti) + 1); sel.attr("sel", "sel"); $("p").not(sel).removeAttr("sel"); return; } start = this; if ($(this).attr("sel") == "sel") { $(this).removeAttr("sel"); } else { $(this).attr("sel", "sel"); } }) }) </script> </head> <body> <div id="main"> <p><img src="http://avatar.csdn.net/9/F/E/1_yanqinhui.jpg" title="访问我的空间"></p> <p><img src="http://avatar.csdn.net/9/F/E/1_yanqinhui.jpg" title="访问我的空间"></p> <p><img src="http://avatar.csdn.net/9/F/E/1_yanqinhui.jpg" title="访问我的空间"></p> <p><img src="http://avatar.csdn.net/9/F/E/1_yanqinhui.jpg" title="访问我的空间"></p> <p><img src="http://avatar.csdn.net/9/F/E/1_yanqinhui.jpg" title="访问我的空间"></p> <p><img src="http://avatar.csdn.net/9/F/E/1_yanqinhui.jpg" title="访问我的空间"></p> <p><img src="http://avatar.csdn.net/9/F/E/1_yanqinhui.jpg" title="访问我的空间"></p> <p><img src="http://avatar.csdn.net/9/F/E/1_yanqinhui.jpg" title="访问我的空间"></p> <p><img src="http://avatar.csdn.net/9/F/E/1_yanqinhui.jpg" title="访问我的空间"></p> <p><img src="http://avatar.csdn.net/9/F/E/1_yanqinhui.jpg" title="访问我的空间"></p> <p><img src="http://avatar.csdn.net/9/F/E/1_yanqinhui.jpg" title="访问我的空间"></p> <p><img src="http://avatar.csdn.net/9/F/E/1_yanqinhui.jpg" title="访问我的空间"></p> <p><img src="http://avatar.csdn.net/9/F/E/1_yanqinhui.jpg" title="访问我的空间"></p> <p><img src="http://avatar.csdn.net/9/F/E/1_yanqinhui.jpg" title="访问我的空间"></p> <p><img src="http://avatar.csdn.net/9/F/E/1_yanqinhui.jpg" title="访问我的空间"></p> <p><img src="http://avatar.csdn.net/9/F/E/1_yanqinhui.jpg" title="访问我的空间"></p> <p><img src="http://avatar.csdn.net/9/F/E/1_yanqinhui.jpg" title="访问我的空间"></p> <p><img src="http://avatar.csdn.net/9/F/E/1_yanqinhui.jpg" title="访问我的空间"></p> </div> </body> </html>2019-07-17 19:55:26赞同 展开评论 打赏
问答分类：
版权声明：本文内容由阿里云实名注册用户自发贡献，版权归原作者所有，阿里云开发者社区不拥有其著作权，亦不承担相应法律责任。具体规则请查看《阿里云开发者社区用户服务协议》和《阿里云开发者社区知识产权保护指引》。如果您发现本社区中有涉嫌抄袭的内容，填写侵权投诉表单进行举报，一经查实，本社区将立刻删除涉嫌侵权内容。
相关问答
问答排行榜
最热
最新
推荐问答
