3

我尝试使用键盘上的四个箭头键移动按钮上的绿色悬停颜色。问题是它不能正常移动。我想要的是以下内容：

  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>

4

2 回答 2

3

这是我个人的解决方案。我在概念上将所有内容划分为行和列。

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>

于 2021-10-21T18:42:23.123 回答
1

这可以通过假设如下网格来完成：

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>

于 2021-10-21T19:19:04.997 回答