通过在JavaScript中单击父母的兄弟项目来删除活动的班级

Question

我正在研究获取卡片脚本，该脚本包含2个阶段。 选择卡>在右侧打开一个相关窗口在该打开的窗口上按立即应用按钮>在底部打开一个相关窗口。

现在，一切都按预期工作，除了：我要这样做，以便如果某人删除选择的卡片（.gacca1 / .gacca2），它也从“获取卡片” div（.gaccaiGET）中删除了“激活的”类，因此删除底部的div（.gara）。 现在，即使您停用卡选择器，它也会保持“获取卡”的状态。

无论我如何尝试（使用我的初学者js技能），我都无法使其正常工作。

另外，如果您查看html和CSS，则会发现大多数元素都是绝对放置的，这是完成此工作的非常不好的方法。 不幸的是，我无法找到一种使职位相对的方法，因为

.divclass.active + .otherdivclass { css }

仅适用于兄弟元素，甚至仅适用于彼此相邻的兄弟元素。 这导致编写较差的html和css，使其外观和工作方式符合我想要的方式。 如果您对此有任何建议，请告诉我！

谢谢

http://jsfiddle.net/4XM9A/10/

(function () {
    var links = Array.prototype.slice.call(document.querySelectorAll('.gacca1'));
    var links2 = Array.prototype.slice.call(document.querySelectorAll('.gacca2'));
    var links3 = Array.prototype.slice.call(document.querySelectorAll('.gaccaiGET'));

    var toggleClass = function (className, element) {
        element.classList.toggle(className);
    };

    var clickHandler = function (linksToDisable) {
        return function () {
            toggleClass('active', this);
            linksToDisable.filter(function (link) {
                return link.classList.contains('active');
            })
            .forEach(function (link) {
                toggleClass('active', link);
            });

        };
    };

    links.forEach(function (link) {
        link.addEventListener('click', clickHandler(links2));
    });
    links2.forEach(function (link) {
        link.addEventListener('click', clickHandler(links));
    });
    links3.forEach(function (link) {
        link.addEventListener('click', function () {
            toggleClass('active', this);
        });
    });
}());

Answer 1

据我了解，您应该首先在“ .active”父级之后切换“ .gaccai”的所有div的“ .active”。 尝试稍微更改功能toggleClass：

var toggleClass = function (className, element) {
        var array = document.querySelectorAll('.' + element.classList + ' + .gaccai .active');
        for (var i = 0; i < array.length; i++) {
            array[i].classList.toggle(className);
        }
        element.classList.toggle(className);
    };