用jQuery控制键盘上下左右键切换选择元素

我这里写了一个上箭头的方法，其他方向以此类推；

这只是其中一种实现的方式：

<!DOCTYPE html>
<html>
<head><meta charset="utf-8" /><title></title><script src="http://libs.baidu.com/jquery/2.0.0/jquery.min.js"></script><style type="text/css">.box{height: 600px;width: 1200px;border: 2px solid aqua;}.cc{width: 800px;float: right;height: 300px;border: 2px solid green;}.cc .dd{width: 120px;height: 300px;float: left;background: yellow;margin-left: 20px;}.cc1{width: 800px ;float: right;height: 200px;border:2px solid blue;margin-top: 50px;}.cc1 .dd1{width: 120px;height: 200px;float: left;background: red;margin-left: 20px;}.l{width: 300px;float: left;height: 600px;border: 2px solid red;}.li{height: 80px;background: black;margin-top: 30px;}.active{background: palegreen !important;}.top{width: 1200px;height: 200px;border: 2px solid aquamarine;}.tt{height:200px;background: olive;width: 150px;float: left;margin-left: 20px;}</style><script type="text/javascript">
        $(function(){var jqThis;var len=0;$(window).keydown(function(e){console.log(e.keyCode)$('.ee').each(function(){if($(this).hasClass('active')){jqThis = $(this)len = $(this).parent().find('.ee').length;}});
  
//             上
                if(e.keyCode==38){
                    if(jqThis.parent().hasClass('l')){
                        if(jqThis.index()==0){
                            jqThis.removeClass('active')
                            jqThis.parents('.box').prev().find('.ee').eq(0).addClass('active')}else{
                            jqThis.prev().addClass('active')
                            jqThis.removeClass('active')}}
                    if(jqThis.parent().hasClass('cc')){
                        jqThis.removeClass('active');
                        jqThis.parents('.box').prev().find('.ee').eq(0).addClass('active')}
                    if(jqThis.parent().hasClass('cc1')){
                        jqThis.parent().prev().find('.ee').eq(0).addClass('active')
                        jqThis.removeClass('active')}}})})</script>
</head>
<body>
<div class="top"><div class="tt ee"></div><div class="tt ee"></div><div class="tt ee"></div><div class="tt ee"></div><div class="tt ee"></div>
</div>
<div class="box"><div class="l"><div class="li ee active" ></div><div class="li ee"></div><div class="li ee"></div><div class="li ee"></div><div class="li ee"></div></div><div class="cc"><div class="dd ee"></div><div class="dd ee"></div><div class="dd ee"></div><div class="dd ee"></div><div class="dd ee"></div></div><div class="cc1"><div class="dd1 ee"></div><div class="dd1 ee"></div><div class="dd1 ee"></div><div class="dd1 ee"></div></div>
</div>
</body>
</html>

用jQuery控制键盘上下左右键切换选择元素相关推荐

html调整表格位置上下左右,利用jquery实现在html的表格中使用上下左右键切换单元格,同时只限制单元格输入数字...
因其他无关代码比较多,只贴关键代码,请谅解. 解释:tblGrid是表格的id , onchange是每个单元格都拥有的方法,当然可以根据实际情况更改flag是标志位,保证按照我想要的顺序新增tabi ...
jQuery的DOM操作之选择元素
.get() 用jQuery选择器选择出来的元素被包装为jQuery对象,而面对不同的需求可能需要我们获取的有时候是jQuery对象,有时候是原生DOM元素,此时使用get方法进行进一步的选择可获得原 ...
fond+html属性,JQuery 干货篇之选择元素
JQuery 干货篇之选择元素实验的HTML+CSS的代码 html Example Jacqui's Flower Shop Astor: Daffodil: Rose: Peony: Primu ...
初识jQuery，八字真言“选择元素，对其操作”
jQuery在我印象中,就是很多类似$(),然后昨天开始接触了,觉得很和谐,获取元素比JavaScript简单很多,有意思. 一.开始学习jQuery,下载jQuery库的文件 http://jque ...
jquery实现上下左右键盘监听_通过上下左右键和回车键切换光标实现代码
客户有这样一个需求在列表中的文本框里输入数据时,要能够通过上下左右键来切换光标,按回车键就把光标移到下一个文本框,接下来将为你介绍下如何实现,感兴趣的朋友可以参考下做项目时,客户提出这样一个要求,在 ...
jQuery learn - 1 - 选择元素 CSS
2019独角兽企业重金招聘Python工程师标准>>> CDN=Content Delivery Networks DOM=Document Object Model W3C=Wor ...
如何使用jQuery按名称选择元素？
本文翻译自:How can I select an element by name with jQuery? Have a table column I'm trying to expand and ...
jquery学习手记（4）元素的选择与操作
一. 选择元素 id选择器,示例为: 1 // Selecting elements by ID 2 $("#myId"); // note IDs must be unique ...
jquery笔记一：下载安装、语法、选择器、遍历选择元素的方法、jQuery动画
目前 jQuery 兼容于所有主流浏览器, 包括 IE 6!开发时常用 jquery.js,上线用 jquery.min.js. jq插件目前jQuery有三个大版本: (1)1.x.x: 兼容ie ...

用jQuery控制键盘上下左右键切换选择元素

用jQuery控制键盘上下左右键切换选择元素相关推荐

最新文章

热门文章