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>

在divs javascript数组上按下按键

1 个答案: