Question

我对JQuery来说相当新，而且我有点糊涂，但按照我的逻辑，下面的应该工作。你能指出什么是错的吗？

我有一堆重复的内容块，其中包含类名.acc-0，acc-1等等，当你点击.plans-breakdown按钮时，它应隐藏并显示.open-link坐在街区内

这是.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操作上，定位嵌套在.plan-breakdown内的.acc-1实例

查看我的小提琴，注意第一个块是如何工作的（.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;
}

不确定JQuery如何解释.each（）和（this）

1 个答案:

Demo Fiddle