使用jquery移动到下一个列表项

我的电脑上有如下导航：

<img id="leftButton" />
  <ul id="bullets">
    <li class="style"></li>
    <li></li>
    <li></li>
    <li></li>
    <li></li>
  </ul>
<img id="rightButton" />

$('#rightButton').click(function() {
    if  ($('#bullets li').hasClass('style')) {
        $('#bullets li').removeClass('style');
        $('#bullets li').next().addClass('style').
        }
});

使用类似的方法，当您单击#right按钮时，它会正确地从第一个列表项中删除类“style”，但会将该类添加到所有其他类中

哦，很抱歉，我的代码乱七八糟，我是jQuery的乞丐

提前谢谢

$('#rightButton, #leftButton').on('click', function(e) {
    var cur = $('ul#bullets li.style'),
        next = cur.next('li'),
        prev = cur.prev('li');
    if (e.target.id == 'rightButton') {
        if (next.length == 1) {
            cur.removeClass('style');
            next.addClass('style');
        }
    } else if (e.target.id = 'leftButton') {
        if (prev.length == 1) {
            cur.removeClass('style');
            prev.addClass('style');
        }
    }
});

---

在这种情况下，您使用的选择器不会以单个元素为目标

#bollets li

将返回元素中包含的所有5个列表项，id为

#bollets

。如果要将指定了CSS类

活动的单个
li
作为目标，请将选择器更改为
#子弹li.active

因此，您的代码将变成：

$('#rightButton').click(function() {
    $('#bullets li.active').removeClass('active').next().addClass('active');
});

请注意，您可以链接调用，无需测试是否返回了元素。
您可以使用以下方法轻松实现这一点：

$('#rightButton').click(function() {
    $('#bullets li.style').removeClass('style').next().addClass('style');
});​

太好了，效果很好。但是有一个小虫子。当我转到列表的末尾并再次单击#right按钮时，类“style”将从列表中消失。