<!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. 
								
  2. AT89S52汇编实现l通过按键中断切换led灯的四种闪烁模式（单灯左移，单灯右移，双灯左移，双灯右移）
		
    ;通过P1口控制8路LED的四种闪烁模式,单独LED灯左移,单独LED灯右移,相邻两个灯左移,相邻两个灯右移;通过一个外部中断0来检测按键的跳变沿来切换闪烁模式,第一次按键按下弹起,灯的闪烁状态由单独 ...
    
		
    3. 
						
  3. uCGUI 按键窗口切换机制
		
    前段时间在做一个窗口项目,这个项目菜单项过多,在管理起来比较麻烦.想做一个高效移植又方便的一个切换机制.后来在网上多方查找这方面资料,但是感觉比较少.后来自己整理出了这个结构,希望对后来朋友有所帮助. ...
    
		
    4. 
						
  4. FPGA——按键（二）
		
    直接上源码: module key_led( input sys_clk , //50Mhz系统时钟 input sys_rst_n, //系统复位,低有效 :] key, //按键输入信号 :] l ...
    
		
    5. 
						
  5. 关闭shift中英文切换  英文代码/中文注释随意切换着写。
		
    x 背景 写代码的时候总是意外的就切成中文了,特别是代码中大小写切换的这种情况... 例如:"public static TimeZone CurrentTime..."publi ...
    
		
    6. 
						
  6. Win+Tab键实现自定义程序列表间的窗口切换
		
    程序是用AutoHotkey语言写的, 说明: 以自己使用频率的顺序在ExeList自定义的程序间切换 切换可以以所有窗口切换,也可以按程序组切换(比如在word窗口间切换) 程序组可以分别定义排除的 ...
    
		
    7. 
						
  7. C/C++使用keybd_event模拟键盘按键
		
    #include <stdio.h> #include <Windows.h> /* 设置键盘大小写状态 big:为TRUE则切换大写状态,否则切换小写状态 */ VOID M ...
    
		
    8. 
						
  8. VS MFC 按键导入BMP图片
		
    1. 图片导入资源: 2.实现代码: 直接给CButton加图片的方法: 1.在资源编辑器中添加一个按钮.把它的Bitmap属性设为true 2.在按钮上点右键,添加一个变量m_Btn(CButton ...
    
		
    9. 
						
  9. Win10 改为用 Ctrl+Shift 切换中英输入语言而不是 Win+空格
		
    是切换中英输入语言,而不是切换输入法,如图: 步骤: 设置 > 设备 > 输入 > 高级键盘设置 > 语言栏选项 > 高级键盘设置 > 更改按键顺序 > 切换 ...
    
		
    10. 
		

	


随机推荐
	

    
									
  1. router+x
			
    vue-router官方的路由管理器 包含的功能: ——绑定方法进行跳转   路由嵌套   写的不一样搜索的路由路径也不一样   二级路由   设置默认路由   导航守卫: 用于强制跳转或者取消的方式 ...
    
			
    2. 
						
  2. 记一次html页面传值给另一个html并解码
			
    前言 由于最近写项目用到layui中的table.render,好像是直接由当前html直接与后台controller取数据,由一方(后台)遍历列表给html,而如果当前html需要传值给这个后台co ...
    
			
    3. 
						
  3. 凸多边形 HRBUST - 1429 计算几何_凸包_未调完
			
    任选一个点作为起始点,将其他点按与该点连线的极角排序,二分查询点在哪两个射线之间, 并特别判断一下边界即可. Code: #include <cstdio> #include <al ...
    
			
    4. 
						
  4. [读书笔记] Python 数据分析  （八）画图和数据可视化
			
    ipython3 --pyplot pyplot: matplotlib 画图的交互使用环境
    
			
    5. 
						
  5. Vue官网todoMVC示例
			
    这个示例是模仿官网示例样式和功能用我自己的方式写的,基本上没有看官网的源码,只参考自定义指令.让我们一步步来探讨一下.官网demo 要实现的功能 单条添加todo 单条删除todo 双击编辑todo  ...
    
			
    6. 
						
  6. 洛谷—— P1640 [SCOI2010]连续攻击游戏
			
    https://www.luogu.org/problem/show?pid=1640 题目描述 lxhgww最近迷上了一款游戏,在游戏里,他拥有很多的装备,每种装备都有2个属性,这些属性的值用[1, ...
    
			
    7. 
						
  7. 洛谷——P1886 滑动窗口|| POJ——T2823 Sliding Window
			
    https://www.luogu.org/problem/show?pid=1886#sub || http://poj.org/problem?id=2823 题目描述 现在有一堆数字共N个数字( ...
    
			
    8. 
						
  8. HDU 4372
			
    想了很久,终于想到了.... 向后看到F,向前看到B,假如把N-1个楼分成F+B个组,则把每个组最高的楼作为看到的楼,那么,其实在确定每一组的最高楼时,左边或右边的最高楼的顺序已经确定了.由于是排列数 ...
    
			
    9. 
						
  9. Hibernate的延迟检索和立即检索
			
    一.立即检索 所谓立即检索就是立即装载和初始化检索方法指定的对象,即使Session关闭了,依然可以正常访问.立即检索策略的启用是通过在映射配置文件中将lazy实行值设置为false实现的. 通俗讲就 ...
    
			
    10. 
						
  10. ThinkPHP5.0框架开发--第6章 TP5.0 请求和响应
			
    ThinkPHP5.0框架开发--第6章 TP5.0 请求和响应 第6章 TP5.0 请求和响应 ===================================== 上次复习 1.新建控制器  ...
    
			
    11.