访问.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.

这条线错了:

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