jquery - 不确定 JQuery 如何解释 .each() 和 (this)

Question

我是 JQuery 的新手，有点糊里糊涂，但根据我的逻辑，下面的代码应该 可以工作。你能指出哪里出了问题吗？

我有一堆具有类名 .a​​cc-0、acc-1 等的重复内容 block ，当您单击 时，它们应该隐藏和显示 .plans-breakdown .open-link 位于 block 内的按钮

这是.acc-1的例子

$('.acc-1').each(function(){
    $(this).find('.open-link').on('click',function() {
        $('.plans-breakdown').not(this).css('display','none');
        $(this).find('.plans-breakdown').fadeToggle(600);
    });
});

HTML;

<div class="schedule-plan acc-0">
<div class="open-link">Floor plan acc-0</div>
    <div class="plans-breakdown">
        content here
    </div>
</div>
</div>
<div class="schedule-plan acc-1">
<div class="open-link">Floor plan acc-1</div>
    <div class="plans-breakdown">
        content for acc-1 here
    </div>
</div>

我希望此函数仅适用于特定代码块。在这个例子中 .acc-1。所以我将函数包装在 $('.acc-1').each(function(){}

中

我已经使用 (this) 来指定需要触发该功能的正确的 .open-link 按钮。此外，在 .fadeToggle 操作中，以嵌套在 .acc-1

中的 .plan-breakdown 实例为目标

看看我的 fiddle ，注意第一个 block 是如何工作的 (.acc-0)。当我使用 .each它没有。

http://jsfiddle.net/bazzle/Q4zmS/2/

谢谢，

Answer 1

Demo Fiddle

您可以简单地使用:

// for every element with a acc- class...
$('[class*=acc-]').on('click', function () {
    // hide all elements previously shown
    $('.plans-breakdown').css('display', 'none');
    // fade in the child element
    $(this).find('.plans-breakdown').fadeToggle(600);
    // for all active links, remove the active class
    $('.open-link').removeClass('active');
    // add the active class to the child link
    $(this).find('.open-link').addClass('active');
});

我还要补充:

.plans-breakdown{
    display:none;
}

对于您的 CSS，消除对 JS 的需要:

$('.plans-breakdown').css('display', 'none');

并将您的 CSS 更改为以下内容，因为您有嵌套规则，这是无效的:

.schedule-plan {
    display:block;
    padding-top:.3em;
    cursor:pointer;
}
.active {
    color:black;
}
.plans-breakdown {
    margin:1em 0 2em 0;
    cursor:default;
}
.plans-breakdown {
    display:none;
}