Блог

Главная - Вопросы по программированию - Коды клавиш / Перемещение вверх, Вниз, Влево, Вправо по группе кнопок

Коды клавиш / Перемещение вверх, Вниз, Влево, Вправо по группе кнопок

#javascript #html #jquery #css

Вопрос:

Я пытаюсь переместить зеленый цвет наведения на кнопки с помощью четырех клавиш со стрелками на клавиатуре. Дело в том, что он не движется нормально. Чего я хочу, так это следующего:

  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 gt; 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 gt; 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; } 
 lt;script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"gt;lt;/scriptgt; lt;div class="all"gt;  lt;buttongt;Onelt;/buttongt;  lt;buttongt;Twolt;/buttongt;  lt;buttongt;Threelt;/buttongt; lt;/divgt; lt;div class="all"gt;  lt;buttongt;Fourlt;/buttongt;  lt;buttongt;Fivelt;/buttongt;  lt;buttongt;Sixlt;/buttongt; lt;/divgt; lt;div class="all"gt;  lt;buttongt;Sevenlt;/buttongt;  lt;buttongt;Eightlt;/buttongt;  lt;buttongt;Ninelt;/buttongt; lt;/divgt;

Комментарии:

1. стрелка вправо будет доступна из трех и семи, восьми и девяти и одного два, три, а стрелка влево-один, девять, восемь, семь, три, два и один соответственно, правильно ли это?

2. Я хочу, чтобы зеленый цвет распространялся во всех направлениях в зависимости от кнопки, которую я нажимаю. например, если он равен 1 и нажмите вниз, перейдите к 4. Если он равен 1, нажмите вправо, чтобы перейти к 2. Если он равен 2 и нажмите влево, перейдите к 1 и т. Д

3. Понял. Вы не включили это в вопрос?

4. Я сделал это. Я надеюсь, что вы сможете помочь…

5. Да, напишу решение для вас

Ответ №1:

Это мое личное решение. Я концептуально разделил все на строки и столбцы.

 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) gt; -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; } 
 lt;script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"gt;lt;/scriptgt; lt;div class="all"gt;  lt;buttongt;Onelt;/buttongt;  lt;buttongt;Twolt;/buttongt;  lt;buttongt;Threelt;/buttongt; lt;/divgt; lt;div class="all"gt;  lt;buttongt;Fourlt;/buttongt;  lt;buttongt;Fivelt;/buttongt;  lt;buttongt;Sixlt;/buttongt; lt;/divgt; lt;div class="all"gt;  lt;buttongt;Sevenlt;/buttongt;  lt;buttongt;Eightlt;/buttongt;  lt;buttongt;Ninelt;/buttongt; lt;/divgt;

Ответ №2:

Это можно сделать, приняв сетку следующим образом:

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 lt;= 0) {  newId = newId   9;  }  if (newId gt; 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; } 
 lt;bodygt;  lt;div class="all"gt;  lt;button id="b-1" class="selected"gt;Onelt;/buttongt;  lt;button id="b-2"gt;Twolt;/buttongt;  lt;button id="b-3"gt;Threelt;/buttongt;  lt;/divgt;  lt;div class="all"gt;  lt;button id="b-4"gt;Fourlt;/buttongt;  lt;button id="b-5"gt;Fivelt;/buttongt;  lt;button id="b-6"gt;Sixlt;/buttongt;  lt;/divgt;  lt;div class="all"gt;  lt;button id="b-7"gt;Sevenlt;/buttongt;  lt;button id="b-8"gt;Eightlt;/buttongt;  lt;button id="b-9"gt;Ninelt;/buttongt;  lt;/divgt;  lt;script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"gt;lt;/scriptgt; lt;/bodygt;
Метки: , , ,