如何使onclick toggleClass互斥？

Question

我正在嘗試使卡選擇互斥，這是我想到的代碼（我是初學者，並且正在研究JS atm）： http : //jsfiddle.net/4XM9A/5/

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

    links.forEach(function (link) {
        link.addEventListener('click', function () {
            toggleClass('active', this);
        });
    });
    links2.forEach(function (link) {
        link.addEventListener('click', function () {
            toggleClass('active', this);
        });
    });
    function toggleClass(className, element) {
        element.classList.toggle(className);
    }
}());

如您所見，當選擇卡片A時，它在右側顯示“卡片A文本”，而在之后選擇卡片B時，它不會從卡片A中刪除“ .active”類。因此，兩個卡片都是活躍，並且卡B始終是獲勝的一張。

我試圖做出這樣的選擇：如果未選擇任何卡，則說-選擇一張卡。 如果選擇了卡A-右側將顯示卡A塊，並帶有相關說明。 如果選擇了卡B，則會在右側顯示卡B塊並提供相關說明。 這些卡選擇應該是互斥的，因此切換一個應該取消切換另一個。

Answer 1

您有正確的主意。 基本上，在單擊處理程序函數中，需要確保被單擊的元素是唯一獲得active類的元素。