我是JS的新手，请在此问题上需要您的帮助。我需要使用HTML，CSS和JS应用向上和向下的键。我拥有原始代码，并且试图对其进行修改，以便可以使用向上和向下键在面板中移动，但似乎根本无法正常工作。这是我正在工作的部分的原始代码片段：
const P_CONTAINERS_LIST = "containersList";
const P_CONTAINER_EDIT = "containerEdit";
const P_CONTAINER_DELETE = "containerDelete";
Logic.registerPanel(P_CONTAINERS_EDIT,{
panelSelector: "#edit-containers-panel",// This method is called when the object is registered.
initialize() {
Logic.addEnterHandler(document.querySelector("#exit-edit-mode-link"),() => {
Logic.showPanel(P_CONTAINERS_LIST);
});
},// This method is called when the panel is shown.
prepare() {
const fragment = document.createDocumentFragment();
Logic.identities().forEach(identity => {
const tr = document.createElement("tr");
fragment.appendChild(tr);
tr.classList.add("container-panel-row");
tr.innerHTML = escaped`
<td class="userContext-wrapper">
<div class="userContext-icon-wrapper">
<div class="usercontext-icon"
data-identity-icon="${identity.icon}"
data-identity-color="${identity.color}">
</div>
</div>
<div class="container-name truncate-text"></div>
</td>
<td class="edit-container pop-button edit-container-icon">
<img
src="/img/container-edit.svg"
class="pop-button-image" />
</td>
<td class="remove-container pop-button delete-container-icon">
<img
class="pop-button-image"
src="/img/container-delete.svg"
/>
</td>`;
tr.querySelector(".container-name").textContent = identity.name;
tr.querySelector(".edit-container").setattribute("title",`Edit ${identity.name} container`);
tr.querySelector(".remove-container").setattribute("title",`Remove ${identity.name} container`);
Logic.addEnterHandler(tr,e => {
if (e.target.matches(".edit-container-icon") || e.target.parentNode.matches(".edit-container-icon")) {
Logic.showPanel(P_CONTAINER_EDIT,identity);
} else if (e.target.matches(".delete-container-icon") || e.target.parentNode.matches(".delete-container-icon")) {
Logic.showPanel(P_CONTAINER_DELETE,identity);
}
});
});
const list = document.querySelector("#edit-identities-list");
list.innerHTML = "";
list.appendChild(fragment);
return Promise.resolve(null);
},}); <div class="scrollable panel-content" tabindex="-1">
<table class="unstriped">
<tbody id="edit-identities-list"></tbody>
</table>
</div>
我试图在我的JS代码中插入以下部分，但是问题仍然存在：
document.addEventListener("keydown",(e) => {
const selectables = [...document.querySelectorAll("[tabindex='0'],[tabindex='-1']")];
const element = document.activeElement;
const index = selectables.indexOf(element) || 0;
function next() {
const nextElement = selectables[index + 1];
if (nextElement) {
nextElement.focus();
}
}
function previous() {
const previousElement = selectables[index - 1];
if (previousElement) {
previousElement.focus();
}
}
switch (e.keyCode) {
case 40:
next();
break;
case 38:
previous();
break;
default:
if ((e.keyCode >= 49 && e.keyCode <= 57) &&
Logic._currentPanel === "containerEdit") {
const element = selectables[e.keyCode - 48];
if (element) {
element.click();
}
}
break;
}
});