Question

我已经坚持了很长一段时间。任何帮助将受到高度赞赏。

我需要的是，一旦客户点击＆gt; arrow当前li元素将处于非活动状态，下一个li元素将处于活动状态。并且该过程将继续，直到列表的最后一个li将是唯一活动的。

这是我的jQuery代码：

$(document).keyup(function(event) {
  if (event.keyCode == 39){    
    $('#nav li .active').next().addClass('active').siblings().removeClass('active');
  }
});

我愿意接受代码的任何建议和修改：）

Answer 1

您可以使用.each()（JQuery）。语法可以像这样$('#nav li .active').each(function(index){Yourcodehere}) 随意评论。

Answer 2

这样的事情怎么样？

$(document).keyup(function(event){
    if(event.keyCode == 39){
      // Capture active li element
      $active_li = $('#nav li.active');
      // Clear active from all li elements
      $('#nav li').each(function () {
         this.removeClass('active');
      });
      // Set active for next li element
      $active_li.next().addClass('active');
      }
  });

甚至可能：

$(document).keyup(function(event){
    if(event.keyCode == 39){
      $('#nav li.active').removeClass('active').next().addClass('active');
      }
  });

Answer 3

以下是实现此目的的一种方法示例。标记显然会有所不同。（下面的JSFiddle - 确保在按下右箭头按钮之前单击HTML框架）：

https://jsfiddle.net/d13kwz1p/

示例HTML

<ul id="menu">
  <li class="active">One</li>
  <li>Two</li>
  <li>Three</li>
</ul>

示例JS

var menu = $('#menu');
$(document).keyup(function(event) {
  if (event.keyCode == 39) {
        var current = menu.find('.active');
    var next = current.next();
    current.removeClass('active');
    if (current.is(':last-child')) {
        menu.find(':first-child').addClass('active');
    } else {
        next.addClass('active');
    }
  }
});

示例CSS：

#menu {
  list-style: none;
  margin: 0;
  padding: 0;
}

#menu li {
  background: #fff;
  padding: 5px;
  margin-bottom: 1px;
}

#menu li.active {
  background: #ccc;
}

如何选择列表中的每个next（）元素并取消选择prev（）？

3 个答案: