prevAll ().length; 获取被选中元素上面的兄弟元素的个数
动态下拉菜单框思路
使用工具 java ajax mysql 新手手打 第一次 当做复盘 语言可能组织不合理 理解万岁
前台
定义一个html页面设置一个input输入框 在输入框下面添加一个div1显示下拉列表
列表项 使用div标签实现 通过ajax动态请求数据库 使用jq生成 最多显示5个根需求而定
添加对应的css
js实现动态菜单功能
给input输入框添加一个onkeyup事件
当键盘弹起时获取输入框中的value值使用trim()方法去除首尾空
如果获取到的数据为空, 使用div对象.html(" ");对下拉列表进行清空并隐藏,
如果不为空,通过ajax发送请求到服务器使用input输入框中的值进行模糊查询;将返回的结果转换位json数组格式,遍历json数组进行div 列表项的拼接最多拼接5次 给每一个div指定一个class方便后期获取.拼接完成以后将列表项添加到div1中并使其显示
按下键盘 上 下 给选中项添加背景颜色 按下键盘上 对应的code码是38 下是40
准备一个class 样式 bg设置bgcolor
当页面加载完成时 给网页 document 绑定一个onkeydown事件
首先定义一个event对象监听键盘
var eve=event||window.event;
如果监听到向上事件时 使input输入框失去焦点
通过上述的class 获取所有下拉框
使用prevAll方法获取被设置过bg样式的下拉框个数
如果为0的话 将下拉框中最后一个设置样式 因为下拉框选中只能有一个 所以添加样式之前先移除所有 下拉框的bg样式 通过eq(),addclass()实现
如果有设置过的话 prevAll().length会返回该元素前面有多少个兄弟元素
假设被选中元素下标为2前面就有两个兄弟元素 下标分别是0,1 上一个元素的下标就是 prevAll().length-1 当这个length减到0时 会继续向最后一个下拉框添加样式
如果监听到向下事件时 使input输入框失去焦点
通过上述的class 获取所有下拉框
通过hasClass("bg")判断是否被设置过样式 如果没有将第一个添加样式
如果被设置过 var len=prevAll().length获取该元素前面有多少个兄弟元素
继续判断是不是最后一个元素 如果是最后一个元素的话
(所有列表项个数-1==len){
// 假设共有5个元素 最后一个被选中时 他前面得到兄弟个数为4 5-当前元素也等于4
给第一个元素添加样式
}否则{
假设被选中的元素是4 它的下表是3 那他前面的兄弟个数(len)就有3个 所以下一个列表项的下标就是len+1
当下标加到4时元素个数是第5个 再次点击就会执行 上面的方法给第一个列表项添加样式
}
js代
传上来就没缩进了
<%--
Created by IntelliJ IDEA.
User: Administrator
Date: 2019/5/15
Time: 11:11
To change this template use File | Settings | File Templates.
--%>
<%@ page contentType="text/html;charset=UTF-8" language="java" %>