在divs javascript数组上按下按键(Navigate on keypress over array of divs javascript)

在divs javascript数组上按下按键(Navigate on keypress over array of divs javascript) <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"); } }); <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>

So i'm listening to keypress and if it's keyCode === 32 which is the space bar, move the selected class one across. So I can do thisIndex++ and increment up by +1 everytime space is pressed but how do I target that element add a class and remove the previous one? I get addClass is not a function error.

$("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> 
  
 
The get() method returns DOM object so you can't use jQuery addClass() method on it, instead use eq() method to get jQuery object based on index.
 
$('.seperator').eq(thisIndex).addClass("selected");
 
 
You can combine all the lines inside the if into one by chaining the methods.
 
$(".seperator").removeClass("selected").eq(thisIndex + 1).addClass("selected");
 
 
UPDATE : You need to get index within the img tag collection(with class seperator) otherwise index calculated including the br tag.
 
 
 
  
  
$("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>