Question

我已经写了一个for循环，它应该贯穿所有手风琴和他们的孩子，但我无法弄清楚为什么它只能处理第一个对象。

for (
    var i = 0,
    accordion = document.getElementsByClassName('accordion');
    i < accordion.length;
    i++
) {
    var accordion_section = accordion[i].children[i],
        accordion_key = accordion[i].children[i].children[0],
        accordion_bellow = accordion[i].children[i].children[1];

    function accordion_bellow_MarginTop( value ) {
        accordion_bellow.style.marginTop = value + 'px';
    }
    accordion_bellow_MarginTop( -accordion_bellow.offsetHeight );

    accordion_key.onclick = function() {
        if ( accordion_section.getAttribute('class' ) == 'active' ) {
            accordion_section.setAttribute('class', '');
            accordion_bellow_MarginTop( -accordion_bellow.offsetHeight );
        }
        else {
            accordion_section.setAttribute('class', 'active');
            accordion_bellow_MarginTop( 0 );
        }
        return false;
    }
}

Answer 1

这里有几个问题在起作用。正如之前的评论者所指出的那样，您没有正确地循环手风琴中的每个部分。修复之后，您还需要解决onClick处理程序无法正常工作的问题。

循环每个部分的问题是您使用了不正确的变量范围。发生的事情只是你循环的最后一个元素会受到点击处理程序的影响。这是因为变量＆＃34; accordion_section＆＃34;和＆＃34; accordion_bellow＆＃34;将始终引用main for循环中的最后一组元素。

这与期望它们将是循环期间分配的唯一元素相反。这是因为变量＆＃34; accordion_section＆＃34;和＆＃34; accordion_bellow＆＃34;在onClick函数的范围内定义 outside 。为了让onClick正常工作，需要在for循环的每次迭代期间在单独的范围内定义这些变量。

为此，您可以使用这样的匿名函数：

for (var i = 0; i < sections.length; i++) 
{
    (function() {
        var section = sections.item(i),
            anchor = sections.item(i).children[0],
            below = sections.item(i).children[1];

        closeBelow(below, -below.offsetHeight);

        anchor.onclick = function () {
            if (section.getAttribute('class' ) == 'active' ) {
                section.setAttribute('class', '');
                closeBelow(below);
            }
            else {
                section.setAttribute('class', 'active');
                openBelow(below);
            }
        }
    })();
}

在此解决方案中，变量＆＃34;部分＆＃34;，＆＃34;锚定＆＃34;和＆＃34;在＆＃34;下面＆＃34;始终特定于您循环的元素。通过使用自执行函数，可以确保每个单击处理程序仅适用于本地范围的变量。

解决方案：http://jsfiddle.net/b0u916p4/4/

Answer 2

你需要在第一个内部制作另一个循环

通过这种方式，您可以获得所有手风琴和每个部分的所有部分

试试这个：

for (i = 0,
     accordion = document.getElementsByClassName('accordion');
    i < accordion.length;
    i++) {

    for (j = 0;
        j <= accordion[i].children.length;
        j++) {


              //your code here

     }
}

滑动手风琴与纯JS和循环

2 个答案: