Question

我的导航就像这样：

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

我想要实现的是当你点击右边或左边的按钮时，课程'风格'移动到了neareast兄弟。例如，当我单击#rightButton时，我想将样式类从第一个列表项移动到第二个列表项，依此类推。我遇到了这样的事情：

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

通过这样的方式，当你点击#rightButton时，它会正确地从第一个列表项中删除类“style”，但是将该类添加到所有其他列中。

哦，抱歉这个混乱的代码，我是jQuery的初学者。

提前致谢。

Answer 1

在这种情况下，您使用的选择器不会以单个元素为目标。 #bullets li将返回ID为#bullets的元素中包含的所有5个列表项。如果您要定位分配了CSS类li的单active，请将您的选择器更改为#bullets li.active。

所以，你的代码将成为：

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

请注意，您可以对调用进行链接，而无需测试是否返回了元素。

Answer 2

$('#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');
        }
    }
});

DEMO

Answer 3

您可以使用以下方法轻松实现此目的：

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

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

3 个答案: