javascript - 如何迭代彼此独立的列表组

Question

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

我的代码仅停用最后一个列表组上的列表组事件类，我错过了什么？

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

请在您的答案代码中添加注释，以便我能够理解其工作原理。谢谢

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

我认为您在当前实现中做得太过分了。您所需要的只是迭代当前列表组，并为每个“a”删除类“active”，然后将类“active”添加到单击的项目。

// 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/