Javascript 创建两个列表并使用键盘在其中导航，然后按enter键，列表项应从一个列表弹出到另一个列表，反之亦然

例如：“像这样，但这是使用鼠标点击。 如果是用按键，那就太好了，谢谢你。” 代码如下：

---

见此：

不完美，但它几乎就在那里

var li = $('li');
var liSelected;
$(window).keydown(function (e) {
if (e.which === 40) {
if (liSelected) {
  liSelected.removeClass('selected');
  next = liSelected.next();
  if (next.length > 0) {
    liSelected = next.addClass('selected');
  } else {
    liSelected = li.eq(0).addClass('selected');
  }
} else {
  liSelected = li.eq(0).addClass('selected');
}
  } else if (e.which === 38) {
if (liSelected) {
  liSelected.removeClass('selected');
  next = liSelected.prev();
  if (next.length > 0) {
    liSelected = next.addClass('selected');
  } else {
    liSelected = li.last().addClass('selected');
  }
} else {
  liSelected = li.last().addClass('selected');
}
} else if (e.which === 39) {
if (liSelected) {
  liSelected.removeClass('selected');
  next = liSelected.parent().next('ol').find('li:first');
  if (next.length > 0) {
    liSelected = next.addClass('selected');
  } else {
    liSelected = li.last().addClass('selected');
  }
} else {
  liSelected = li.last().addClass('selected');
}
  } else if (e.which === 37) {
if (liSelected) {
  liSelected.removeClass('selected');
  next = liSelected.parent().prev('ol').find('li:first');
  if (next.length > 0) {
    liSelected = next.addClass('selected');
  } else {
    liSelected = li.last().addClass('selected');
  }
} else {
  liSelected = li.last().addClass('selected');
}
}
  else if (e.which === 13) {
  var $el = $(".ingredient.selected"); //.removeClass('selected')
  var added = false;
  var targetList = $el.parent().siblings(".ingredientList")[0];
  $el.fadeOut("fast", function () {
  $(".ingredient", targetList).each(function () {
    if ($el.text() > $el.text()) {
      $el.insertBefore($el).fadeIn("fast");
      added = true;
      return false;
    }
  });
  if (!added) $el.appendTo($(targetList)).fadeIn("fast");
});
}
});

---

“像这样，但这是使用鼠标点击。如果它是使用按键，这将是伟大的感谢你。”这是你的客户要求吗？告诉他雇一个开发人员！这是可能的，但如果它使用按键，您决定在第一个实例中应该发生什么事情来引起对列表的关注？如果我选择列表的第一个和最后一个元素，是否可能对两个列表进行单独的导航，并且光标移向另一侧。光标不应移动到其他列表

var li = $('li');
var liSelected;
$(window).keydown(function (e) {
if (e.which === 40) {
if (liSelected) {
  liSelected.removeClass('selected');
  next = liSelected.next();
  if (next.length > 0) {
    liSelected = next.addClass('selected');
  } else {
    liSelected = li.eq(0).addClass('selected');
  }
} else {
  liSelected = li.eq(0).addClass('selected');
}
  } else if (e.which === 38) {
if (liSelected) {
  liSelected.removeClass('selected');
  next = liSelected.prev();
  if (next.length > 0) {
    liSelected = next.addClass('selected');
  } else {
    liSelected = li.last().addClass('selected');
  }
} else {
  liSelected = li.last().addClass('selected');
}
} else if (e.which === 39) {
if (liSelected) {
  liSelected.removeClass('selected');
  next = liSelected.parent().next('ol').find('li:first');
  if (next.length > 0) {
    liSelected = next.addClass('selected');
  } else {
    liSelected = li.last().addClass('selected');
  }
} else {
  liSelected = li.last().addClass('selected');
}
  } else if (e.which === 37) {
if (liSelected) {
  liSelected.removeClass('selected');
  next = liSelected.parent().prev('ol').find('li:first');
  if (next.length > 0) {
    liSelected = next.addClass('selected');
  } else {
    liSelected = li.last().addClass('selected');
  }
} else {
  liSelected = li.last().addClass('selected');
}
}
  else if (e.which === 13) {
  var $el = $(".ingredient.selected"); //.removeClass('selected')
  var added = false;
  var targetList = $el.parent().siblings(".ingredientList")[0];
  $el.fadeOut("fast", function () {
  $(".ingredient", targetList).each(function () {
    if ($el.text() > $el.text()) {
      $el.insertBefore($el).fadeIn("fast");
      added = true;
      return false;
    }
  });
  if (!added) $el.appendTo($(targetList)).fadeIn("fast");
});
}
});