javascript - Keycodes/onclick enter，显示多个innerHTML名称

Question

当我移动键盘上的 4 个箭头时，绿色悬停颜色移动到每个按钮上。我想在按下“Enter”时写下与每个框对应的数字。例如现在我有“列”，它写 0、1、2、3、4、5、6。我想写一二三等..当然我使用 Handebars, Backcone, Lodash 所以我不想改变 HTML 中的任何东西 (Handlebars.compile) 非常感谢..

var columns = 0;
var rowButtons = 0;

var $rows = $('.multiple');
var liSelected;

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 li').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 + ') li');
    columns = columns == 0 ? $buttonsInRow.length - 1 : columns - 1;
    break;

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

case arrows.enter:
// find the column and row position:
$buttonsInRow = $('.multiple:eq(' + rowButtons + ') li');
var position = (rowButtons * 6 ) + columns + 1; 
 rowButtons = rowButtons == $rows.click;
 
 document.getElementById('screen').innerHTML = columns;

break;
     }

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

// Click function on handlebars 
// Affect href ie. <a href="#" patterns="one"> (It doesn't work on enter(13)
var ListView = BacListViewkbone.View.extend({
events: {
'click a': 'onClick'
},
render: function() {
var rawHTML = _template({ items: myList });
this.$el.html(rawHTML);
this.$items = this.$el.find('a');
return this;
},

onClick: function(e) {
var id = $(e.currentTarget).attr('patterns');
dispatcher.trigger(dispatcher.EventKeys.PATTERNS_SELECTED, myList[id]);
}
});
function init(options) {
dispatcher.register(evs);
new ListView(options).render();
}
  
return {
init: init
}

li.selected {
  background: green;
}

.multiple, .allRows li{
    text-align:center;
    position:relative;
    display: flex;
    flex-wrap: nowrap;
}

.allRows a {
  text-decoration:none;
  padding: 3px;
  border: 1px solid #555; 
  color: #222; 
  margin: 0px;
  text-align: center;
  font-size:20px;

} 

#screen {
  background:#222;
  color:#ddd;
  position:absolute;
  top: 100px;
  padding:30px 150px;
}

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

<ul class="allRows">
<div class="multiple">
<li><a href="#" patterns="one" id="one" onClick="one()">One</a></li>
<li><a href="#" patterns="two" id="two" onClick="two()">Two</a></li>
<li><a href="#" patterns="three" id="three" onClick="three()">Three</a></li>
<li><a href="#" patterns="four" id="four" onClick="four()">Four</a></li>
<li><a href="#" patterns="five" id="five" onClick="five()">Five</a></li>
<li><a href="#" patterns="six" id="six" onClick="six()">Six</a></li>
</div>
<div class="multiple">
<li><a href="#" patterns="seven" id="seven" onClick="seven()">Seven</a></li>
<li><a href="#" patterns="eight" id="eight" onClick="eight()">Eight</a></li>
<li><a href="#" patterns="nine" id="nine" onClick="nine()">Nine</a></li>
<li><a href="#" patterns="ten" id="ten" onClick="ten()">Ten</a></li>
<li><a href="#" patterns="eleven" id="eleven" onClick="eleven()">Eleven</a></li>
<li><a href="#" patterns="twelve" id="twelve" onClick="twelve()">Twelve</a></li></div>
</ul>


<div id="screen">Numbers</div>

Answer 1

如果您不想将翻译存储在元素 html 本身上，则需要有一个对象将值映射到要输出的名称。这是一个极简主义的例子:

const numberNameMap = {
  1: 'one',
  2: 'two',
  3: 'three',
  4: 'four',
  5: 'five'
};

const select = document.querySelector('select');
const output = document.getElementById('output');

select.addEventListener('change', ({ target: { value } }) => {
  output.textContent = numberNameMap[value];
});

<select>
<option>1</option>
<option>2</option>
<option>3</option>
<option>4</option>
<option>5</option>
</select>

<div id="output"></div>