javascript - 菜单遍历下一个和上一个按钮单击

Question

任何人都可以优化这段代码吗？我是 jquery 的新手。我想在下一个和上一个按钮单击上添加类。我编写此代码的任何方式都对我有用，但如果有人使用 jquery 预定义方法优化此代码。那么它将更有帮助。提前致谢

$(document).ready(function () {
    var length = $('#slides li').size() - 1;
    var curren = 0;
    console.log(length);
    $('.next').on('click', function () {
        if (curren >= 0 && curren < length) {
            curren++;
            $('.selected').removeClass('selected');
            $('#slides li:eq(' + curren + ')').addClass('selected');
        }
    });
    $('.prev').on('click', function () {
        if (curren >= 1) {
            curren--;
            $('.selected').removeClass('selected');
            $('#slides li:eq(' + curren + ')').addClass('selected');
        }
    });
});

我的html代码

<ul id="slides">
    <li class="selected">first</li>
    <li>second</li>
    <li>third</li>
    <li>fourth</li>
    <li>five</li>
    <li>six</li>
</ul>

Answer 1

您应该看看$.next和 $.prev .

您的代码可以轻松地更改为以下内容:

$(".next").on("click", function() {
  var selected = $("#slides li.selected");
  var next = selected.next();
  if(next.length){next.addClass("selected");selected.removeClass("selected");}
});
$(".prev").on("click", function() {
  var selected = $("#slides li.selected");
  var prev = selected.prev();
  if(prev.length){prev.addClass("selected");selected.removeClass("selected");}
});

示例可以在这里找到:jsbin