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

Answer 2

溶液：

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

Answer 3

“step-holder a”的父级是包含“a”标记的div，而不是#step holder div。我添加了另一个父函数调用：

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

Answer 4

您可以使用一系列方法在更新的问题中执行您的要求。

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

演示http://jsfiddle.net/gaby/zSXnm/3/

访问.each（）上的当前项

4 个答案: