鍵碼/按鈕組上、下、左、右移動

我嘗試使用鍵盤上的四個箭頭鍵移動按鈕上的綠色懸停顏色。問題是它不能正常移動。我想要的是以下內容：

1. 按右，綠色向右。
2. 按向左，綠色向左移動。
3. 向上或向下按，綠色也會轉到中間行（四五六），而不會 從 HTML 中洗掉。

我希望綠色根據我按下的按鈕向各個方向移動。例如，如果它在 1 并按下，則轉到 4。如果它在 1，則按向右轉到 2。如果它在 2，然后按向左，則轉到 1，以此類推

鍵碼為：左：37，右：39，上：38，下：40

怎么做到呢？非常感謝！！！

var button = $('button');
var buttonSelected;
$(window).keydown(function(e) {
  if (e.which === 40) {
    if (buttonSelected) {
      buttonSelected.removeClass('selected');
      next = buttonSelected.next();
      if (next.length > 0) {
        buttonSelected = next.addClass('selected');
      } else {
        buttonSelected = button.eq(0).addClass('selected');
      }
    } else {
      buttonSelected = button.eq(0).addClass('selected');
    }

  } else if (e.which === 38) {
    if (buttonSelected) {
      buttonSelected.removeClass('selected');
      next = buttonSelected.prev();
      if (next.length > 0) {
        buttonSelected = next.addClass('selected');
      } else {
        buttonSelected = button.last().addClass('selected');
      }
    } else {
      buttonSelected = button.last().addClass('selected');
    }
  }
});

button.selected {
  background: green
}

.all button {
  border: 1px solid blue;
  color: #222;
  padding: 10px 25px;
  cursor: pointer;
}

.all button:hover {
  background-color: orange;
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div class="all">
  <button>One</button>
  <button>Two</button>
  <button>Three</button>
</div>
<div class="all">
  <button>Four</button>
  <button>Five</button>
  <button>Six</button>
</div>
<div class="all">
  <button>Seven</button>
  <button>Eight</button>
  <button>Nine</button>
</div>

uj5u.com熱心網友回復：

這是我個人的解決方案。我在概念上將所有內容分為行和列。

var indexCol = 0;
var indexRow = 0;

var $rows = $('.all');
var buttonSelected;
var arrow = { left: 37, up: 38, right: 39, down: 40 };



$(window).keydown(function(e) {
  
  if (Object.values(arrow).indexOf(e.which) > -1) {
    e.preventDefault();
    $('.all button').removeClass('selected');
  
    switch (e.which) {
      case arrow.up:
        indexRow = indexRow == 0 ? $rows.length - 1 : indexRow - 1;
        break;
        
      case arrow.down:
        indexRow = indexRow == $rows.length - 1 ? 0 : indexRow   1;
        break;
        
      case arrow.left:
        $buttonsInRow = $('.all:eq('   indexRow   ') button');
        indexCol = indexCol == 0 ? $buttonsInRow.length - 1 : indexCol - 1;
        
        break;

      case arrow.right:
        $buttonsInRow = $('.all:eq('   indexRow   ') button');
        indexCol = indexCol == $buttonsInRow.length - 1 ? 0 : indexCol   1;
        
        break;
    }
  
    buttonSelected = $('.all:eq('   indexRow   ') button:eq('   indexCol   ')');
    buttonSelected.addClass('selected');
  }

});

button.selected {
  background: green
}

.all button {
  border: 1px solid blue;
  color: #222;
  padding: 10px 25px;
  cursor: pointer;
}

.all button:hover {
  background-color: orange;
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div class="all">
  <button>One</button>
  <button>Two</button>
  <button>Three</button>
</div>
<div class="all">
  <button>Four</button>
  <button>Five</button>
  <button>Six</button>
</div>
<div class="all">
  <button>Seven</button>
  <button>Eight</button>
  <button>Nine</button>
</div>

uj5u.com熱心網友回復：

這可以通過假設一個網格來完成，如下所示：

1 2 3
4 5 6
7 8 9

讓我們選擇 5 作為起點。

• 往上走，你減去3
• 往下走，你加3
• 往左走，你減去1
• 往右走，你加 1

我們還必須處理超出范圍的情況：

• 當你小于或等于0時，你加9
• 當你大于9時，你減去9

以下是相同的作業代碼：

$(window).keydown(function(e) {
  // remove the old active
  let buttonSelected = document.querySelector(".selected");
  buttonSelected.classList.remove("selected");

  let buttonId = parseInt(buttonSelected.id[2]);
  var newId = 0;

  if (e.which === 40) {
    // go down
    console.log(40, "down");
    newId = buttonId   3;
  } else if (e.which === 38) {
    // go up
    console.log(38, "up");
    newId = buttonId - 3;
  } else if (e.which == 37) {
    // go left
    console.log(37, "left");
    newId = buttonId - 1;
  } else if (e.which === 39) {
    // go right
    console.log(39, "right");
    newId = buttonId   1;
  }

  // adjust when out of range
  if (newId <= 0) {
    newId = newId   9;
  }
  if (newId > 9) {
    newId = newId - 9;
  }

  // set the next active
  let nextItem = "#b-"   newId.toString();
  let newSelected = document.querySelector(nextItem);
  newSelected.classList.add("selected");
});

button.selected {
  background: green;
}

.all button {
  border: 1px solid blue;
  color: #222;
  padding: 10px 25px;
  cursor: pointer;
}

.all button:hover {
  background-color: orange;
}

<body>
  <div class="all">
    <button id="b-1" class="selected">One</button>
    <button id="b-2">Two</button>
    <button id="b-3">Three</button>
  </div>
  <div class="all">
    <button id="b-4">Four</button>
    <button id="b-5">Five</button>
    <button id="b-6">Six</button>
  </div>
  <div class="all">
    <button id="b-7">Seven</button>
    <button id="b-8">Eight</button>
    <button id="b-9">Nine</button>
  </div>
  <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
</body>

標籤：javascript html 查询 css

上一篇：React組件中的HTML表格行沒有回應我的css樣式以限制內容的高度

下一篇：使用不在同一個div中的按鈕隱藏/顯示div