使用鍵碼提交/更改懸停顏色上的多個innerHTML

因此，當我按下鍵盤上的箭頭鍵（向左、向右、向上、向下）時，綠色懸停顏色會轉到相應的按鈕。

我想要做的是，每次我按“回傳”或“回車”鍵（鍵碼 13）時，在螢屏上寫下相應的數字。

例如，如果綠色懸停顏色為 2 并且我按下“Return/Enter”鍵，則在螢屏上寫下“Two”。我希望滑鼠也能發生同樣的事情。例如，如果我點擊 2 ，在螢屏上寫上“Two”。

我怎樣才能做到這一點？當然，在所有這些方面更好的編碼總是受歡迎的..非常感謝！！！

var columns = 0;
var rowButtons = 0;

var $rows = $('.multiple');
var buttonSelected;
var arrows = { left: 37, up: 38, right: 39, down: 40, enter: 13 };



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

    case arrows.right:
    $buttonsInRow = $('.multiple:eq('   rowButtons   ') button');
    columns = columns == $buttonsInRow.length - 1 ? 0 : columns   1;
    break;
   
    case arrows.enter:
    rowButtons = rowButtons == $rows.click;
    document.getElementById("screen").innerHTML ="one"
    break;
    
   }
    buttonSelected = $('.multiple:eq('   rowButtons   ') button:eq('   columns   ')');
    buttonSelected.addClass('selected');
  }

});

#screen {
  width:100%;
  padding:20px;
  background: #222;
  color:lime;
}

button.selected {
  background: green
}

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

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

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>

  <button id="screen">--</button>

<div class="multiple">
  <button>1</button>
  <button>2</button>
  <button>3</button>
</div>
<div class="multiple">
  <button>4</button>
  <button>5</button>
  <button>6</button>
</div>
<div class="multiple">
  <button>7</button>
  <button>8</button>
  <button>9</button>
</div>

uj5u.com熱心網友回復：

對于箭頭鍵： 由于您有columns和rowButtons變數，您可以計算當前懸停在哪個數字上。每行構成移動三列。所以如果我們有rowButtons = 1那么列位置將是 4（這是第二行的開始）。因此，如果我們想知道我們如何移動數字，我們可以rowButtons * 3計算該部分。然后留下列：每次columns增加 1，數字也向上移動 1（數字是我們鍵盤上的位置）。所以我們可以columns加到rowButtons * 3得到數值，但由于columns是從零開始的（以 1 開頭的串列示columns = 0）我們需要加一來得到精確的值，所以我們得到：

rowButtons * 3   columns   1

所以我們現在已經計算了數字，但由于您似乎想要字串值，我們可以向我們的 javascript 添加一個物件，其中每個鍵都是從數字到字串（又名2: "two"）的映射。

由于您還提到您希望能夠在鍵盤上單擊，我們可以為所有按鈕添加一個按鈕偵聽器，單擊時使用相同的物件映射為我們提供字串。我會說該偵聽器假定頁面上的所有按鈕都是鍵盤按鈕，因此您可能需要添加一個像類一樣的識別符號以確保沒有任何問題。我沒有更改任何 HTML 或 CSS，但這里有一個簡單的示例：

var columns = 0;

var rowButtons = 0;

var $rows = $('.multiple');
var buttonSelected;
var arrows = {
  left: 37,
  up: 38,
  right: 39,
  down: 40,
  enter: 13
};

var tableValues = {
  1: "one",
  2: "two",
  3: "three",
  4: "four",
  5: "five",
  6: "six",
  7: "seven",
  8: "eight",
  9: "nine"
};

$(window).keydown(function(e) {

  if (Object.values(arrows).indexOf(e.which) > -1) {
    e.preventDefault();
    $('.multiple button').removeClass('selected');

    switch (e.which) {
      case arrows.up:
        rowButtons = rowButtons == 0 ? $rows.length - 1 : rowButtons - 1;
        break;

      case arrows.down:
        rowButtons = rowButtons == $rows.length - 1 ? 0 : rowButtons   1;
        break;

      case arrows.left:
        $buttonsInRow = $('.multiple:eq('   rowButtons   ') button');
        columns = columns == 0 ? $buttonsInRow.length - 1 : columns - 1;
        break;

      case arrows.right:
        $buttonsInRow = $('.multiple:eq('   rowButtons   ') button');
        columns = columns == $buttonsInRow.length - 1 ? 0 : columns   1;
        break;

      case arrows.enter:
        // find the column and row position:
        var pos = (rowButtons * 3)   columns   1;
        console.log(pos);
        rowButtons = rowButtons == $rows.click;
        document.getElementById("screen").innerHTML = tableValues[pos];
        break;

    }
    buttonSelected = $('.multiple:eq('   rowButtons   ') button:eq('   columns   ')');
    buttonSelected.addClass('selected');
  }

});

$("button").click(function() {
  let pos = $(this).text();

  document.getElementById("screen").innerHTML = tableValues[pos];
});

#screen {
  width: 100%;
  padding: 20px;
  background: #222;
  color: lime;
}

button.selected {
  background: green
}

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

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

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>

<button id="screen">--</button>

<div class="multiple">
  <button>1</button>
  <button>2</button>
  <button>3</button>
</div>
<div class="multiple">
  <button>4</button>
  <button>5</button>
  <button>6</button>
</div>
<div class="multiple">
  <button>7</button>
  <button>8</button>
  <button>9</button>
</div>

標籤：javascript html 查询 css

上一篇：如果似乎沒有錯誤，如何開始除錯jQuery？

下一篇：如何在JQuery中對子項使用.not選擇器