用键盘跟鼠标对li的选择进行操作
日期：2014-05-16 浏览次数：20346 次
用键盘和鼠标对li的选择进行操作
本人是用的腾讯的接口实现的绑定数据，想实现当按下down和up还有鼠标悬浮的时候对li进行选择高亮，li是动态添加的，我不知道怎样判断当前高亮的li 从而进行下一次高亮选择。请求大神帮助
------解决方案--------------------
做了个示例，仅供参考：
本人是用的腾讯的接口实现的绑定数据，想实现当按下down和up还有鼠标悬浮的时候对li进行选择高亮，li是动态添加的，我不知道怎样判断当前高亮的li 从而进行下一次高亮选择。请求大神帮助
------解决方案--------------------
做了个示例，仅供参考：
<!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">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>无标题文档</title>
<script src="jquery-1.2.6.pack.js"></script>
<style>
ul,li,dl,dd{padding:0;margin:0;}
ul{width:410px;}
li{list-style:none;border:1px solid red;float:left;width:410px;}
dd{float:left;width:100px;line-height:20px;border:1px solid #ddd;padding:3px 0;}
.cur{background-color:#ccc;}
</style>
</head>
<body>
<ul id="container"></ul>
<script>
var json=[
{id:"000002",name:"万科A",pingyin:"WKA",city:"深圳"}
,{id:"000003",name:"万科A",pingyin:"WKA",city:"深圳"}
,{id:"000004",name:"万科A",pingyin:"WKA",city:"深圳"}
,{id:"000005",name:"万科A",pingyin:"WKA",city:"深圳"}
,{id:"000006",name:"万科A",pingyin:"WKA",city:"深圳"}
];
$(function(){
json.forEach(function(i){
$("#container").append("<li><dl><dd>"+ i.id +"</dd><dd>"+ i.name +"</dd><dd>"+ i.pingyin +"</dd><dd>"+ i.city +"</dd></dl></li>");
});
$("#container li").eq(0).addClass("cur");
$(document).keydown(function(event){
var cur=$("#container li.cur");
var length=$("#container li").length;
var first=$("#container li").eq(0);
var last=$("#container li").eq(length-1);
if(event.keyCode==40)
{
if(cur.html()!=last.html())
{
cur.removeClass("cur");
cur.next().addClass('cur');
}
}
if(event.keyCode==38)
{
if(cur.html()!=first.html())
{
cur.removeClass("cur");
cur.prev().addClass('cur');
}
}
});
});
</script>
</body>
</html>
免责声明： 本文仅代表作者个人观点，与爱易网无关。其原创性以及文中陈述文字和内容未经本站证实，对本文以及其中全部或者部分内容、文字的真实性、完整性、及时性本站不作任何保证或承诺，请读者仅作参考，并请自行核实相关内容。
