我可以在第二次触发事件时执行一组不同的代码吗
Can I execute a different set of code on the second time an event is triggered?
我正在尝试开发一个可以从箭头键导航的菜单,但在弄清楚"突出显示"第一个元素的初始事件触发器的位置时遇到了一些问题。如果你检查一下我的小提琴,你会发现当按下右箭头键时,第一个元素会高亮显示(记得点击小提琴的主体部分。
$(document).ready(function($) {
$("body").keydown(function(event) {
if (event.which == 39) {
$(".a").css({
"outline": "3px solid red"
});
}
});
});
.tile {
width: 100px;
height: 100px;
outline: 1px solid red;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="tile a">
A
</div>
<div class="tile b">
B
</div>
<div class="tile c">
C
</div>
任何提示和反馈都将受到赞赏,即使它将代码带向了完全不同的方向!
您应该处理所有方向键事件,如下所示:
$(document).ready(function($) {
var activeIndex = -1;
$(".tile").hover(
function() {
$(this).css({
"outline": "3px solid red"
});
},
function() {
$(this).css({
"outline": "1px solid red"
});
}
);
$("body").keydown(function(event) {
if (event.which == 39) {
activeIndex = 0;
} else if (event.which == 38 && activeIndex != -1) {
activeIndex--;
} else if (event.which == 40 && activeIndex != -1) {
activeIndex++;
}
if (activeIndex < 0) {
activeIndex = 0;
} else if (activeIndex == $("#menu-container").children(".tile").length) {
activeIndex = $("#menu-container").children(".tile").length - 1;
}
if (activeIndex != -1) {
$("#menu-container").children(".tile").css({
"outline": "1px solid red"
});
$("#menu-container").children(".tile").eq(activeIndex).css({
"outline": "3px solid red"
});
}
});
});
.tile {
width: 100px;
height: 100px;
outline: 1px solid red;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div id="menu-container">
<div class="tile a">
A
</div>
<div class="tile b">
B
</div>
<div class="tile c">
C
</div>
</div>
当按下箭头时,您可以检查当前活动的菜单项,删除其高亮样式并将其添加到下一个项目中。
像这样:
if (event.which == 39) {
var active_title = $('.tile.active');
active_title.removeClass('active');
if ( active_title.length && active_title.next().length) {
active_title.next().addClass('active');
} else {
$('.a').addClass('active');
}
}
试试看https://jsfiddle.net/1kf34rdq/11/
需要的某些标志
$(document).ready(function($) {
var arrowPressed = false;
$("body").keydown(function(event){
if (event.which == 39) {
if( !arrowPressed ) {
$(".a").css({"outline":"3px solid red"});
arrowPressed = true;
}
else {
$(".a").css({"outline":"none"});
arrowPressed = false;
}
}
});
});
相关文章:
- fluxxor向一个flux实例添加一组以上的操作
- 我们怎样才能将内含子J用于一组特定的元素
- 使用linq.js按当前日期订购一组momentjs日期
- 正则表达式,从一组关键字中获取奇数
- 创建一组元素JointJS
- 可能只在for循环内部运行一次代码块
- 如何在javascript中获取一组复选框值
- 一组(共组..)
- 使用JS将页面中的每个字母设置为随机颜色.为什么在页面的每个打开标记之前总是有一组额外的span标记
- 如何使用Javascript为警报编写无线电组代码
- 在一组复选框中,一次只允许选择一个
- 为什么在fabricjs中可选择的不适用于一组圆
- 如何在不刷新页面的情况下每次单击一组选项卡时刷新视图内容窗格
- 从一组具有相同起始和结束的所有段落的段落中提取包含特定字符串的段落
- 简单的Javascript文本编辑器或一组函数
- 基于日期范围的一组日期范围内的天数
- 如何为下面的代码而不是行创建一组新的列
- 在页面加载后淡出对象一段时间,然后在淡出后运行另一组代码
- 当一组ajax请求完成时运行代码
- 我可以在第二次触发事件时执行一组不同的代码吗