如何使onclick toggleClass互斥？

Question

I am trying to make my card selections mutually exclusive, this is the code I came up with (I am a beginner, and I am studying 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);
    }
}());

As you can see, when you select card A, it shows the "card A text" on the right, when you select card B right after, it doesn't remove the ".active" class from card A. Thus both cards are active, and card B is always the one winning over.

I am trying to make so that if no cards are selected, it says - select a card. If card A is selected - Card A block is shown on the right with relevant instructions. If card B is selected - Card B block is shown on the right with relevant instructions. These card selections should be mutually exclusive, so toggling one should untoggle the other one.

Answer 1

You've got the right idea. Basically, in your click handler function you need to make sure that the element that was clicked is the only one that gets the active class.