jquery - 访问 .each() 上的当前项目

Question

我有以下代码:

HTML

<div id="step-holder">
    <div class="step-no">1</div>
    <div class="step-dark-left"><a href="#">Basic details</a></div>
    <div class="step-dark-right">&nbsp;</div>
    <div class="step-no-off">2</div>
    <div class="step-light-left"><a href="#">SEO</a></div>
    <div class="step-light-right">&nbsp;</div>
    <div class="step-no-off">3</div>
    <div class="step-light-left"><a href="#">Preview</a></div>
    <div class="step-light-round">&nbsp;</div>
    <div class="clear"></div>
</div>

JQUERY

$('#step-holder a').click(function (e) {
    e.preventDefault();
    $(this).parent('.step-light-left').each(function () {
        $(this).removeClass('.step-light-left').addClass('.step-dark-left');
    });
});

但第二个 $(this) (在 .each 内)仍然引用原始的 $(this)。 所以，它不起作用。

如何实现这一目标？我不明白为什么第二个 $(this) 不引用 .each() 当前项目。

或者，如果您有其他解决方案，可以将所有 step-light-left 更改为 step-light-right ，反之亦然。

我需要做的是关闭所有“未点击”的 div 并打开点击的 div。

Answer 1

您的问题可能与此的范围无关。

这一行是错误的:

$(this).removeClass('.step-light-left').addClass('.step-dark-left');

应该是:

$(this).removeClass('step-light-left').addClass('step-dark-left');

没有点。尝试一下。

添加 Chris 评论:您实际上不需要使用 .each()，您可以直接在选择器上添加/删除类。

更多添加:如果您想关闭所有“未点击”的 div 并打开点击的 div，如果您定义一个名为“active”或其他名称的类会怎样。然后，您只需在点击函数中执行类似的操作:

$('#step-holder .active').removeClass('active');
$(this).parent().addClass('active');