Question

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

我的代码只会停用最后一个列表组中的列表组活动类，我缺少什么？

请在答案代码中加入评论，以便了解其原因。感谢

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

我认为您对当前实施所需的内容过于苛刻。您只需要遍历当前列表组，并且每个＆＃39; a＆＃39;删除课程＆＃39;有效＆＃39;然后添加class＆＃39; active＆＃39;到被点击的项目。

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

Answer 2

我根据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
    }

如何相互独立地遍历列表组

2 个答案: