<div id="wrapper">
<img class="seperator selected" src="imgs/character_1.png" tabindex="0" />
<img class="seperator" src="imgs/character_2.png" tabindex="0" />
<br />
<img class="seperator" src="imgs/character_3.png" tabindex="0" />
<img class="seperator" src="imgs/character_4.png" tabindex="0" />
<br />
<img class="seperator" src="imgs/character_5.png" tabindex="0" />
<img class="seperator" src="imgs/character_6.png" tabindex="0" />
</div>
所以我正在听 keypress
如果它是 keyCode === 32
这是空格键,移动 selected
第一类穿过。所以我可以执行 thisIndex++
并在每次按下空格时增加 +1
但我如何针对该元素添加一个类并删除前一个?我收到 addClass is not a function
错误。
$("body").on("keydown", function(e) {
var thisIndex = $(".selected").index();
var newIndex = null;
if (e.keyCode === 32) {
$(".seperator").removeClass("selected");
thisIndex++;
$('.seperator').get(thisIndex).addClass("selected");
}
});
最佳答案
get()
方法返回 DOM 对象,因此您不能使用 jQuery addClass()
方法,而是使用 eq()
基于索引获取 jQuery 对象的方法。
$('.seperator').eq(thisIndex).addClass("selected");
您可以通过链接方法将 if 中的所有行合并为一个。
$(".seperator").removeClass("selected").eq(thisIndex + 1).addClass("selected");
更新:您需要在 img
标签集合中获取索引(使用类 seperator
),否则计算的索引包括 br
标签。
$("body").on("keydown", function(e) {
// specify the collection as the argument
var thisIndex = $(".selected").index('.seperator');
if (e.keyCode === 32)
$(".seperator")
.removeClass("selected")
.eq(thisIndex + 1)
.addClass("selected");
});
.selected {
border: 1px solid red
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div id="wrapper">
<img class="seperator selected" src="imgs/character_1.png" tabindex="0" />
<img class="seperator" src="imgs/character_2.png" tabindex="0" />
<br />
<img class="seperator" src="imgs/character_3.png" tabindex="0" />
<img class="seperator" src="imgs/character_4.png" tabindex="0" />
<br />
<img class="seperator" src="imgs/character_5.png" tabindex="0" />
<img class="seperator" src="imgs/character_6.png" tabindex="0" />
</div>
关于javascript - 在 div javascript 数组上的按键导航,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/42419505/