0

例: 「このように、これはマウス クリックを使用しています。キー プレスを使用している場合は、ありがとうございます。」ここにコードがあります：デモ

$(".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");
   });
});
4

1 に答える 1

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");
});
}
});
于 2013-01-10T13:29:17.553 に答える