1

我的导航是这样的：

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

我想要实现的是，当您单击右侧或左侧按钮时，“样式”类会移动到最近的兄弟姐妹。例如，当我单击#rightButton 时，我想将样式类从第一个列表项移动到第二个，依此类推。我遇到了这样的事情：

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

像这样，当您单击#rightButton 时，它会正确地从第一个列表项中删除类“样式”，但将该类添加到所有其他项中。

哦，对不起这个混乱的代码，我是 jQuery 的初学者。

提前致谢。

4

3 回答 3

2

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

因此，您的代码将变为：

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

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

于 2012-05-19T08:33:47.300 回答
1 
$('#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');
        }
    }
});

演示

于 2012-05-19T08:31:18.437 回答
0

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

$('#rightButton').click(function() {
    $('#bullets li.style').removeClass('style').next().addClass('style');
});​
于 2012-05-19T08:35:02.050 回答