通過在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);
    };