javascript - 创建两个列表并使用键盘导航并在输入键上按下列表项应从一个列表弹出到另一个列表，反之亦然

Question

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

$(".ingredient").click(function(){
   var element = $(this);
   var added = false;
   var targetList = $(this).parent().siblings(".ingredientList")[0];
   $(this).fadeOut("fast", function(){
     $(".ingredient", targetList).each(function(){
       if ($(this).text() > $(element).text()){
          $(element).insertBefore($(this)).fadeIn("fast");
          added = true; return false; 
        } 
     });
     if(!added) $(element).appendTo($(targetList)).fadeIn("fast");
   });
});

---

Answer 1

看到这个：http: //jsfiddle.net/Nhv8n/

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

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");
});
}
});