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

菜单遍历next和prev按钮单击

1 个答案: