如何遍历彼此独立的列表组

Question

我正在尝试为 3 个列表组创建一个简单的切换，每个列表组中有多个列表项。每个列表组一次只能有 1 个活动项目，总共 3 个活动项目（每个列表组一个）。

我的代码只停用了最后一个列表组上的列表组活动类，我错过了什么？

见JSbin：https://jsbin.com/hizezu

请在您的答案代码中包含 cmets，以便我了解它的工作原理。谢谢

HTML

                      <div id="selectPatientCategories">
                            <div class="list-group">
                                <h4>Select Doctor</h4>
                                <hr>
                                <a href="#" class="list-group-item">Dr. Justice Freedom</a>
                                <a href="#" class="list-group-item">Dr. Martin Fabio</a>
                                <a href="#" class="list-group-item">Dr. Jenny Walter</a>
                                <a href="#" class="list-group-item">Dr. Loius Von Winkle</a>
                                <a href="#" class="list-group-item">Dr. Mary McDoctors</a>
                                <a href="#" class="list-group-item">Dr. Freethinker Liver</a>
                                <a href="#" class="list-group-item">Dr. Cognitive Thinker</a>
                            </div>
                       <div class="list-group">
                                <h4>Select Doctor</h4>
                                <hr>
                                <a href="#" class="list-group-item">Dr. Justice Freedom</a>
                                <a href="#" class="list-group-item">Dr. Martin Fabio</a>
                                <a href="#" class="list-group-item">Dr. Jenny Walter</a>
                                <a href="#" class="list-group-item">Dr. Loius Von Winkle</a>
                                <a href="#" class="list-group-item">Dr. Mary McDoctors</a>
                                <a href="#" class="list-group-item">Dr. Freethinker Liver</a>
                                <a href="#" class="list-group-item">Dr. Cognitive Thinker</a>
                            </div>
                    <div class="list-group">
                                <h4>Select Doctor</h4>
                                <hr>
                                <a href="#" class="list-group-item">Dr. Justice Freedom</a>
                                <a href="#" class="list-group-item">Dr. Martin Fabio</a>
                                <a href="#" class="list-group-item">Dr. Jenny Walter</a>
                                <a href="#" class="list-group-item">Dr. Loius Von Winkle</a>
                                <a href="#" class="list-group-item">Dr. Mary McDoctors</a>
                                <a href="#" class="list-group-item">Dr. Freethinker Liver</a>
                                <a href="#" class="list-group-item">Dr. Cognitive Thinker</a>
                            </div>
                      </div>

还有 JS

  // Vanilla JS version of apply class "active" on click of .list-group-item

    var listGroup = document.querySelectorAll('#selectPatientCategories .list-group');
    //console.log(listGroup);

    var cats = document.querySelectorAll('a.list-group-item');
    //console.log(cats);

    // For each category list group
    var listGroupIndex = 0, listGroupLength = listGroup.length;
    for (; listGroupIndex < listGroupLength; listGroupIndex++) {
        var thisListGroup = listGroup[listGroupIndex];
        //console.log(thisListGroup);

        // For each category list item
        var catIndex = 0, catLength = cats.length;
        for (; catIndex < catLength; catIndex++) {
            var thiscat = cats[catIndex];
            //console.log(listGroupIndex);

            // Click function on list item
            thiscat.addEventListener('click', function () {
                //console.log(thisListGroup);

                var thisListGroupCats = thisListGroup.querySelectorAll('a.list-group-item');
                //console.log(thisListGroupCats);

                var rmcatIndex = 0, rmCatLength = thisListGroupCats.length;
                //console.log(rmCatLength);
                for (; rmcatIndex < rmCatLength; rmcatIndex++) {

                    rmthiscat = thisListGroupCats[rmcatIndex];
                    //console.log(rmthiscat);

                    rmthiscat.classList.remove('active');
                    this.classList.add('active');

                }

            }); // End click function
        }
    }

Answer 1

我根据 DinoMyte 的回答创建了一个纯 JavaScript 解决方案： https://jsbin.com/vexoli

    //Vanilla JS version of apply class "active" on click of .list-group-item

    var listGroup = document.querySelectorAll('#selectPatientCategories .list-group');
    //console.log(listGroup);

    var cats = document.querySelectorAll('a.list-group-item');
    //console.log(cats);

    // For each category list item
    var catIndex = 0, catLength = cats.length;
    for (; catIndex < catLength; catIndex++) {
        var thiscat = cats[catIndex];
        //console.log(listGroupIndex);

        // Click function on list item
        thiscat.addEventListener('click', function () {
            //console.log(thisListGroup);

            //Get the parent .list-group
            thisListGroup = this.parentElement;
            thisListGroupCats = thisListGroup.querySelectorAll('a.list-group-item');

            //console.log(thisListGroupCats);

            // For each category .list-group-item within this listGroup
            var listGroupIndex = 0, listGroupCatsLength = thisListGroupCats.length;
            for (; listGroupIndex < listGroupCatsLength; listGroupIndex++) {

                // Focus on just this .list-group being iterated
                rmThisCat = thisListGroupCats[listGroupIndex];
                rmThisCat.classList.remove('active');

            }
            this.classList.add('active');

        }); // End click function
    }

Answer 2

我认为您对当前实施的必要性做得过火了。您只需要遍历当前列表组并为每个“a”删除“活动”类，然后将“活动”类添加到被点击的项目。

// target an 'a' element with class='list-group-item' inside an element which has class 'list-group'.
$(".list-group a[class='list-group-item']").click(function()
{
    // get the 'list-group' element of the current 'a' element clicked.
    // $(this) refers to the element object which invoked the event.
    var listGroup = $(this).parent();
    // look for each 'a' element within the current 'list-group' and remove class 'active' if it has so.
     $(listGroup).find("a").removeClass("active");

    // add class 'active' to the 'a' element which was clicked
    $(this).addClass("active");
});

例如：http://jsfiddle.net/j2c59j9j/2/