Question

我正在创建一个菜单，您可以在其中选择单击它们的项目或使用菜单中的箭头项目移动。好。我使用选择器恢复的集合中的所选类标记所选项目：

 $('.mainSlider li:not(.leftBounce,.rightBounce)'); //All li items inside mainSlider without leftBounce and rightBounce classes

问题是 leftBounce 和 rightBounce 箭头项也被标记（它们没有出现在上一组中，所以我对此感到困惑）。

我有下一个<ul>项目。

<ul>
  <li class="leftBounce"><span class="spanBig"> < </span></li>
  <li><span class="spanBig">A</span><span class="spanMedium">ROW</span><span class="spanMedium">GREENS</span></li>
  <li><span class="spanBig">B</span><span class="spanMedium">ROW</span><span class="spanMedium">LIGHTS</span></li>
  <li><span class="spanBig">C</span><span class="spanMedium">ROW</span><span class="spanMedium">GOLD/BROWN</span></li>
  <li><span class="spanBig">D</span><span class="spanMedium">ROW</span><span class="spanMedium">BLUE</span></li>
  <li><span class="spanBig">E</span><span class="spanMedium">ROW</span><span class="spanMedium">BLACK</span></li>
  <li class="rightBounce"><span class="spanBig"> > </span></li>
</ul>

我有下一个JS代码：

var mainli = $('.mainSlider li:not(.leftBounce,.rightBounce)');
var mainliSelected;
var mainLeftBounce = $('.mainSlider .leftBounce');
var mainRightBounce = $('.mainSlider .rightBounce');

/* Main Right Navigation*/
mainRightBounce.click(function(){
    if(mainliSelected){
        mainliSelected.removeClass('selected');
        next = mainliSelected.next();
        if(next.length > 0){
            mainliSelected = next.addClass('selected');
        }else{
            mainliSelected = mainli.eq(0).addClass('selected');
        }
    }else{
        mainliSelected = mainli.eq(0).addClass('selected');
    }
});
/* Main Right Navigation*/

/* Main Left Navigation*/
mainLeftBounce.click(function(){
    if(mainliSelected){
        mainliSelected.removeClass('selected');
        next = mainliSelected.prev();
        if(next.length > 0){
            mainliSelected = next.addClass('selected');
        }else{
            mainliSelected = mainli.last().addClass('selected');
        }
    }else{
        mainliSelected = mainli.last().addClass('selected');
    }
});
/* Main Left Navigation*/

这里有一个小提琴示例： https://jsfiddle.net/zomoxp9L/

Answer 1

只做两件事，它会按预期工作：

在主右侧导航功能中：

next = mainliSelected.next().not('.rightBounce');

在左主导航功能

中

 next = mainliSelected.prev().not('.leftBounce');

请参阅更新的小提琴：https://jsfiddle.net/zomoxp9L/

带箭头按钮的水平菜单可选项

1 个答案: