使用向下箭頭鍵在jQuery中選擇其他元素底部的元素

我可以使用向右和向左箭頭鍵將元素的焦點從右向左移動，反之亦然。使用向下箭頭鍵在jQuery中選擇其他元素底部的元素

但是，我也想知道如何選擇上方或下方的元素。我知道jQuery具有next()和prev()函數，但是如何關注上面和下面的函數？

<!DOCTYPE html> 
<html> 
<head> 
    <title></title> 
    <link rel="stylesheet" type="text/css" href="./index.css"> 
    <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script> 
</head> 
<body> 


    <h1 >First</h1><h2>Second</h2> 
    <button class="move">something</button> 
    <button class="move">Third</button> 
    <h1 >Another</h1> 
    <h3 >Five</h3> 
    <button class="move">another button</button> 

    <script type="text/javascript" src="./index.js"></script> 
</body> 
</html>

的.js

$(".move:first").focus(); 
$(document).keydown(
    function(e) 
    {  
     if (e.keyCode == 39) {  
      $(".move:focus").next().focus(); 
     } 

     if (e.keyCode == 37) {  
      $(".move:focus").prev().focus(); 
     } 

     if (e.keyCode == 38) {  
     } 

     if (e.keyCode == 40) {  
     } 
    } 
);

來源

2017-08-10 user2419831

所以，你要4個按鈕，同比增長>向下>左>右你想根據客戶按鍵的方向來設置焦點？ – NewToJS

「上方」和「下方」將根據視口進行更改，您是否考慮過這一點？ – progrAmmar

其實你不能筆直改變按鈕之間焦點垂直jQuery的功能。

但您可以使用nextAll()和prevAll()函數捕獲所有下一個或上一個元素以訪問波紋管或頂部按鈕。

然後，您可以將下方（或上方）按鈕傳遞給預期條件（'if'語句）以更改焦點。

例如在這部分代碼：

if (e.keyCode == 40) { //down arrow key 
     if (elementPrevOfNextButton != null){ 
      if (bottomButton != null){ 
       bottomButton.focus(); 
      } 
     } 
}

其中，bottomButton是「波紋管按鈕元件」，即在代碼的其它部分初始化。

在內部「if」語句的主體中，焦點轉移到了預期的按鈕。

這裏是完整的代碼：http://cssdeck.com/labs/collab/ibftenb4/0

下面是摘錄的完成代碼：

$(function() { 
 
    $(".move:first").focus(); 
 
    $(document).keydown(
 
     function(e) 
 
     { 
 

 
      //// definitions for the right(i.e. next) elements (consists of buttons or other elements) 
 
      var nextElement = $(".move:focus").next(); //the next element (whatever) 
 
      var nextButton = $(".move:focus").nextAll('.move')[0]; //the first button after the other elements 
 
      var elementPrevOfNextButton = null; //the element in the previous of the 'first next button' 
 
      var allNextElements = $(".move:focus").nextAll(); 
 

 

 
      var prevElement = $(".move:focus").prev(); //the previous element (whatever) 
 
      var prevButton = $(".move:focus").prevAll('.move')[0]; //the first button in previous of the other elements 
 
      var elementNextOfPrevButton = null; //the element in the next of the 'first previous button' 
 
      var allPrevElements = $(".move:focus").prevAll(); 
 

 
      ////variable to get the first button element in the bottom lines 
 
      var bottomButton = null; 
 

 
      ////variable to get the first button element in the upside lines 
 
      var topButton = null; 
 

 
      ////the first loop: to catch the below button element 
 
      var i=0; 
 
      for (; i<allNextElements.length; i++){ 
 
       if(allNextElements[i].tagName!= "BUTTON"){ 
 
        elementPrevOfNextButton = allNextElements[i]; 
 
        bottomButton = $(elementPrevOfNextButton).nextAll('.move')[0]; 
 
        break; 
 
       } 
 
      } 
 

 
      ////the second loop: to catch the upside button element 
 
      i=0; 
 
      for (; i<allPrevElements.length; i++){ 
 
       if(allPrevElements[i].tagName!= "BUTTON"){ 
 
        elementNextOfPrevButton = allPrevElements[i]; 
 
        topButton = $(elementNextOfPrevButton).prevAll('.move')[0]; 
 
        break; 
 
       } 
 
      } 
 

 
      if (e.keyCode == 39) { //right arrow key 
 
       if(nextElement.prop("tagName") != "BUTTON"){ 
 
        if(nextButton != null){ 
 
         nextButton.focus(); 
 
        } 
 
       } 
 
       else{ 
 
        nextElement.focus(); 
 
       } 
 
      } 
 

 
      if (e.keyCode == 37) { //left arrow key 
 
        if (prevElement.prop("tagName") != "BUTTON") { 
 
         if (prevButton != null) { 
 
          prevButton.focus(); 
 
         } 
 
        } 
 
        else { 
 
         prevElement.focus(); 
 
        } 
 
      } 
 

 
      if (e.keyCode == 38) { //up arrow key 
 
       if (elementNextOfPrevButton != null){ 
 
        if (topButton != null){ 
 
         topButton.focus(); 
 
        } 
 
       } 
 
      } 
 

 
      if (e.keyCode == 40) { //down arrow key 
 
       if (elementPrevOfNextButton != null){ 
 
        if (bottomButton != null){ 
 
         bottomButton.focus(); 
 
        } 
 
       } 
 

 
      } 
 
     } 
 
    ); 
 
});

<!DOCTYPE html> 
 
<html lang="en"> 
 
<head> 
 
    <meta charset="UTF-8"> 
 
    <title>Title</title> 
 
    <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script> 
 
</head> 
 
<body> 
 
    <button class="move">first</button> 
 
    <button class="move">second</button> 
 
    <h1>hey</h1> 
 
    <button class="move">third</button> 
 
    <button class="move">fourth</button> 
 
    <div><p>------------------------</p></div> 
 
    <button class="move">5</button> 
 
    <button class="move">6</button> 
 
    <h1>how are you doing?</h1> 
 
    <button class="move">7</button> 
 
    <button class="move">8</button> 
 

 

 
    <script src="js1.js"></script> 
 
</body> 
 
</html>

來源

2017-08-10 16:48:04

謝謝。我讚賞詳細的答案。它運作良好。 – user2419831

使用向下箭頭鍵在jQuery中選擇其他元素底部的元素

回答

相關問題