導航按鍵上的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的div的數組，如果它keyCode === 32這是空格鍵，移動一個selected類對面。所以我可以做thisIndex++並每次按下空間時增加+1，但是如何定位該元素添加一個類並刪除前一個？我收到addClass is not a function錯誤。導航按鍵上的JavaScript以上

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

});

來源

2017-02-23 PourMeSomeCode

的get()方法返回DOM對象，所以你不能在上面使用jQuery addClass()方法，而是使用eq()方法來獲得基於索引的jQuery對象。

$('.seperator').eq(thisIndex).addClass("selected");

您可以通過級聯方法結合內，如果到一個所有行。

$(".seperator").removeClass("selected").eq(thisIndex + 1).addClass("selected");

UPDATE：您需要的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>

來源

2017-02-23 15:11:22

啊這是有道理的！謝謝！你有沒有注意到我增加的方式？在「按鍵」上，它似乎增加了「1」，「2」，「4」，「7」。我試着增加'thisIndex + = 1;'而不是'thisIndex ++' – PourMeSomeCode

@PourMeSomeCode：updated –

謝謝！我認爲，因爲我只針對選定的類'$（「。selected」）。index（）;'增加只會增加一個，但你的答案是非常有意義的。再次感謝：） – PourMeSomeCode

導航按鍵上的JavaScript以上

回答

相關問題