javascript - 在 div javascript 数组上的按键导航

Question

  <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");
  }

});

Answer 1

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>