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

时间:2014-04-22 16:13:00

标签: jquery html css

我对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/

谢谢,

1 个答案:

答案 0 :(得分:2)

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;
}