Question

我是jQuery的新手，并且一直在使用进度指示器进行测验，并遇到了一些jQuery问题。这是我的进度指示器的html

<div id="progressKeeper">
    <ul>
        <li><a class="step" href="#"></a></li>
        <li><a class="step" href="#"></a></li>
        <li><a class="step" href="#"></a></li>
        <li><a class="step" href="#"></a></li>
        <li><a class="step" href="#"></a></li>
        <li><a class="step" href="#"></a></li>
        <li><a class="step" href="#"></a></li>
        <li><a class="step" href="#"></a></li>
        <li><a class="step" href="#"></a></li>
    </ul>
</div>

使用css，我将带有灰色圆圈的背景图像添加到.step类的所有锚标记中，并创建了一个带有.step类{和} {{}}的锚标记的图像{1}}将背景图片切换为绿色圆圈

.green

并且使用jQuery，当点击类#progressKeeper li a.step { background: url(img/Progress_grey.png) no-repeat; width: 14px; height: 14px; position: absolute; } #progressKeeper li a.step.green { background: url(img/Progress_green.png) no-repeat; }的按钮时，我尝试将课程.green添加到下一个#progressKeeper li a.step。

.btnNext

我的问题是，当我点击按钮＆＃34;下一步＆＃34;时，所有下一个$('.btnStart').click(function(){ $('#progressKeeper li a.step').first().addClass('green'); }); $('.btnNext').click(function(){ $('#progressKeeper ul li a.step').parent().next('li').find('a').addClass('green'); });元素都被添加为绿色类。我使用.next（），据我所知，它应该只选择第一个直接兄弟。

我在哪里做错了？

编辑：我忘了提及我希望前进的元素保持绿色。你所有的解决方案都有效，感谢您的解释，但我不确定接受哪个答案，因为阿富汗威士忌＆＃39;答案是正确的，即使你并不确切地知道我想要什么。

Answer 1

您的“下一步”按钮正在选择所有.step元素，然后遍历以查找每个元素中的a元素。您只需选择同时具有.step类的.green元素，然后从中删除green并将其添加到下一个。{1}}。像这样：

$('.btnNext').click(function(){
    $('#progressKeeper ul li a.step.green').removeClass('green').closest('li').next().find('a').addClass('green');
});

Example fiddle

如果您希望green课程在列表中向下移动而不删除上一项，请移除.removeClass('green')来电：http://jsfiddle.net/ah5ngktb/1/

Answer 2

这是一个常见的问题，人们对jQuery设置如何工作有所了解。

此代码：

$('#progressKeeper ul li a.step').parent()

...将生成一个jQuery集，其中包含li元素的全部，这些元素是位于a.step内的ul元素的父元素{ {1}}。因此，在#progressKeeper之后添加.next()会导致除了其中一个li元素之外的所有元素（第一个不在集合中），因为它会在之后获取下一个元素元素目前在集合中。

要限制自己使用特定元素，您可以使用green类，例如：

$('.btnNext').click(function(){
    $('#progressKeeper ul li a.step.green').last().parent().next('li').find('a').addClass('green');
});

这将继续在拥有它的最后一个元素之后添加类green。

Answer 3

这必须指向下一个li及其包含的a

$('.btnNext').click(function(){
       $('#progressKeeper ul li a.step.green').removeClass('green').closest('li')
           .next('li').find('a').addClass('green');
});

jQuery .next（）正在选择所有而不仅仅是下一个

3 个答案: