jquery .next()无法正常工作

s6fujrry  于 2023-06-22  发布在  jQuery
关注(0)|答案(1)|浏览(162)

我正在使用js快捷键插件shortcut.js来启用上下箭头的键盘快捷键来选择标签。单击选项卡时,该选项卡将被选中。单击选项卡,然后使用向上和向下箭头选择相邻选项卡。我使用.prev().next()来控制选择,但是.next()有问题。当选择一个选项卡时,所选内容将跳到最后一个选项卡。
JSBIN:http://jsbin.com/maqiheja/3/edit?html,css,js,output

JS:

shortcut.add("up",function() {
  $('.tab').each(function(){
    var selected = $(this).hasClass('selected');
    var end = $('.tab:first-of-type').hasClass('selected');
    if((selected === true) && (end === false)){
      $(this).removeClass('activeTab selected');
      $(this).prev().addClass('activeTab selected');
    }
  });
});

shortcut.add("down",function() {
  $('.tab').each(function(){
    var selected = $(this).hasClass('selected');
    var end = $('.tab:last-of-type').hasClass('selected');
    if((selected === true) && (end === false)){
      $(this).removeClass('activeTab selected');
      $(this).next().addClass('activeTab selected');
    }
  });
});
hts6caw3

hts6caw31#

你不需要循环。只需将所选选项卡移动到下一个选项卡一次。

shortcut.add("down", function() {
    var selected = $('.tab.selected');
    var end = $('.tab:last-of-type').hasClass('selected');
    if (selected.length && !end) {
        selected.removeClass('activeTab selected');
        selected.next().addClass('activeTab selected');
    }
});

shortcut.add("up", function() {
    var selected = $('.tab.selected');
    var end = $('.tab:first-of-type').hasClass('selected');
    if (selected.length && !end) {
        selected.removeClass('activeTab selected');
        selected.prev().addClass('activeTab selected');
    }
});

相关问题