<!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>
<title></title>
<script src="Scripts/jquery-1.4.1.js" type="text/javascript"></script>
<style type="text/css">
*{margin:0px;padding:0px;}
body{font-size:12px;} .box{margin:10px;padding:10px;}
.box h3{margin:10px 0px;border-bottom:1px solid red;padding-bottom:10px;}
.box p{line-height:20px;} #databox{margin:10px auto;padding:10px;width:470px;border:5px solid pink;display:table;}
#databox img{float:left;border:5px solid #11cc99;width:130px;height:160px;margin:8px;}
#databox img.selected{border:5px solid red;} </style>
<script type="text/javascript" src="Scripts/jquery-1.4.1.js"></script>
<script type="text/javascript">
//38、40、37、39
$(function(){
$(window).keydown(function(event){
var a = $(".selected").attr("picid");
// var a = $("[class=selected]").attr("picid")
var c = $("img[picid="+a+"]");
var result = parseInt(event.keyCode) switch(result){
case : //上
a = parseInt(a)-;
c = $("img[picid='"+a+"']");
c.siblings().removeClass("selected")
c.addClass("selected")
break; case : //下
a = parseInt(a)+;
c = $("img[picid='"+a+"']");
c.siblings().removeClass("selected")
c.addClass("selected")
break; case : //左
a = parseInt(a)-;
c = $("img[picid='"+a+"']");
c.siblings().removeClass("selected")
c.addClass("selected")
break; case : //又
a = parseInt(a)+;
c= $("img[picid='"+a+"']");
c.siblings().removeClass("selected")
c.addClass("selected")
break;
} if(result==){
var a1 = c.attr("title")
alert(a1)
}
}); })
</script> </head>
<body>
<div class="box">
<h3>试题要求</h3>
<p>
.请从下面的中选择你最喜欢的一个。<br />
.通过上下左右四个按键进行选取。<br />
.选择完毕后,按下enter键,以对话框的形式将其弹出来。<br />
.提示:上下左右四个键的值分别为:、、、;回车键的值为:;获取建值可以通过事件对象的which属性获取:event.which。
</p>
</div> <div id="databox"> <img picid="" src="Pictures/1.jpg" title="" />
<img picid="" src="Pictures/2.jpg" title="" class="selected" />
<img picid="" src="Pictures/3.jpg" title="" />
<img picid="" src="Pictures/4.jpg" title="" />
<img picid="" src="Pictures/5.jpg" title="" />
<img picid="" src="Pictures/6.jpg" title="" />
<img picid="" src="Pictures/7.jpg" title="" />
<img picid="" src="Pictures/8.jpg" title="" />
<img picid="" src="Pictures/9.jpg" title="" /> </div>
</body>
</html>


【jQuery05】通过按键 来切换 class的更多相关文章

  1. uCGUI 按键窗口切换机制(更新篇)

    在之前文章中,讲述了一个低内存使用量的的窗口切换机制.有人会问,低内存使用量是多低呢,我这里举个例子.我有一个项目中使用到本切换机制,128*64的单色屏,初步计算有105个窗口(后面还会增加),总内 ...

  2. AT89S52汇编实现l通过按键中断切换led灯的四种闪烁模式(单灯左移,单灯右移,双灯左移,双灯右移)

    ;通过P1口控制8路LED的四种闪烁模式,单独LED灯左移,单独LED灯右移,相邻两个灯左移,相邻两个灯右移;通过一个外部中断0来检测按键的跳变沿来切换闪烁模式,第一次按键按下弹起,灯的闪烁状态由单独 ...

  3. uCGUI 按键窗口切换机制

    前段时间在做一个窗口项目,这个项目菜单项过多,在管理起来比较麻烦.想做一个高效移植又方便的一个切换机制.后来在网上多方查找这方面资料,但是感觉比较少.后来自己整理出了这个结构,希望对后来朋友有所帮助. ...

  4. FPGA——按键(二)

    直接上源码: module key_led( input sys_clk , //50Mhz系统时钟 input sys_rst_n, //系统复位,低有效 :] key, //按键输入信号 :] l ...

  5. 关闭shift中英文切换 英文代码/中文注释随意切换着写。

    x 背景 写代码的时候总是意外的就切成中文了,特别是代码中大小写切换的这种情况... 例如:"public static TimeZone CurrentTime..."publi ...

  6. Win+Tab键实现自定义程序列表间的窗口切换

    程序是用AutoHotkey语言写的, 说明: 以自己使用频率的顺序在ExeList自定义的程序间切换 切换可以以所有窗口切换,也可以按程序组切换(比如在word窗口间切换) 程序组可以分别定义排除的 ...

  7. C/C++使用keybd_event模拟键盘按键

    #include <stdio.h> #include <Windows.h> /* 设置键盘大小写状态 big:为TRUE则切换大写状态,否则切换小写状态 */ VOID M ...

  8. VS MFC 按键导入BMP图片

    1. 图片导入资源: 2.实现代码: 直接给CButton加图片的方法: 1.在资源编辑器中添加一个按钮.把它的Bitmap属性设为true 2.在按钮上点右键,添加一个变量m_Btn(CButton ...

  9. Win10 改为用 Ctrl+Shift 切换中英输入语言而不是 Win+空格

    是切换中英输入语言,而不是切换输入法,如图: 步骤: 设置 > 设备 > 输入 > 高级键盘设置 > 语言栏选项 > 高级键盘设置 > 更改按键顺序 > 切换 ...

随机推荐

  1. hdu2614 Beat

    题意: 有n个问题. 给出你解决完第i个问题之后解决j问题所花的时间,花的时间越多表示难度越大,每次只能解决难度大于或等于上个题难度的问题.问你最多能解决多少问题. 他妈的,第一次做想半天想不出来如何 ...

  2. mount --bind

    [root@iZwz9i55e7v33yn8ksnh8nZ ~]# mkdir /tmp/dir1 [root@iZwz9i55e7v33yn8ksnh8nZ ~]# mkdir /tmp/dir2 ...

  3. 【BZOJ5020】[LOJ2289]【THUWC2017】在美妙的数学王国中畅游 - LCT+泰勒展开

    咕咕咕?咕咕咕! 题意: Description 数字和数学规律主宰着这个世界. 机器的运转, 生命的消长, 宇宙的进程, 这些神秘而又美妙的过程无不可以用数学的语言展现出来. 这印证了一句古老的名言 ...

  4. nmcli

    [root@web01 ~]# nmcli device status DEVICE TYPE STATE CONNECTION eth0 ethernet connected eth0 lo loo ...

  5. Vue -- 只弹一次的弹框

    核心代码是 getCookie()部分,控制弹框的显示隐藏则在 created()中. <template> <div v-if="isShow"> < ...

  6. 一个学习scrapy的网站

    当然是scrapy中文网辣,从浅到深,例子报错几乎都有 http://www.scrapyd.cn/doc/

  7. django开发微信公众平台遇到的问题记录

    在pythonanywhere.com上使用django开发微信公众平台应用,结果用户发送的信息,微信服务器一次也没有成功转发到pythonanywhere上来,但是用接口测试工具调试却发现是正常的, ...

  8. 【BZOJ 1211】 [HNOI2004]树的计数

    [链接] 我是链接,点我呀:) [题意] 在这里输入题意 [题解] prufer数列的应用 http://www.cnblogs.com/AWCXV/p/7626625.html 这一题没有节点的度数 ...

  9. nodejs是一个平台,是平台

    node.js是用javascript来写服务器代码的平台

  10. Accessibility辅助控制类

    熟悉Android开发的都知道辅助功能服务 Accessibility service.他的作用有非常多.360豌豆荚等应用市场的非root自己主动安装.微信抢红包插件.盲人辅助程序等等功能都是靠它实 ...