Cuando muevo las 4 flechas en el teclado, el color verde se mueve sobre cada botón. Quiero cuando presione "Enter" para escribir el número que corresponde a cada cuadro. Por ejemplo, ahora tengo "columnas" y escribe 0,1,2,3,4,5,6. Quiero escribir One Two Three, etc. Por supuesto, uso Handebars, Backcone, Lodash, así que no quiero cambiar nada en HTML (Handlebars.compile). Muchas gracias.
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>Si no desea almacenar la traducción en los propios elementos html, deberá tener un objeto que asigne los valores a los nombres que se generarán. He aquí un ejemplo minimalista:
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>