javascript - 通过在 JavaScript 中单击父项的兄弟项来删除事件类

Question

我正在编写一个获取卡片的脚本，它包含两个阶段。选择卡片 > 在右侧打开相关窗口在打开的窗口上按“立即应用”按钮 > 在底部打开一个相关窗口。

现在一切都按预期工作，除了:我想这样做，如果一个人删除了一个卡片选择(.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);
    };