选择下一个列表组并更改数据状态答案

【问题标题】：Select the next list group and change data-state选择下一个列表组并更改数据状态
【发布时间】：2016-01-19 14:19:54
【问题描述】：

单击列表组时，我需要选择下一个（以下）列表组并将其更改为 data-state=enabled .list-group 并从每个列表组中删除 disabled 类-项目

我的代码越来越复杂，我想知道 1）如何让计数器工作，这样它就不会因增加太多而引发错误 2）如何在不使用jquery的情况下简化它 3) 如何使用 jquery 简化此操作

            <section>
                <div class="list-group">
                    <h4>1. Select Doctor</h4>
                    <hr>
                    <a href="#" class="list-group-item active">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>
            </section>
            <section>
                <div class="list-group" data-state="disabled">
                    <h4>2. Select Department</h4>
                    <hr>
                    <a href="#" class="list-group-item disabled">Cras justo odio</a>
                    <a href="#" class="list-group-item disabled active">Dapibus ac facilisis in</a>
                    <a href="#" class="list-group-item disabled">Morbi leo risus</a>
                    <a href="#" class="list-group-item disabled">Porta ac consectetur ac</a>
                    <a href="#" class="list-group-item disabled">Vestibulum at eros</a>
                </div>
            </section>
            <section>
                <div class="list-group" data-state="disabled">
                    <h4>3. Select Area</h4>
                    <hr>
                    <a href="#" class="list-group-item disabled active">Cras justo odio</a>
                    <a href="#" class="list-group-item disabled">Dapibus ac facilisis in</a>
                    <a href="#" class="list-group-item disabled">Morbi leo risus</a>
                    <a href="#" class="list-group-item disabled">Porta ac consectetur ac</a>
                    <a href="#" class="list-group-item disabled">Vestibulum at eros</a>
                </div>
            </section>

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

var cats = document.querySelectorAll('a.list-group-item');
//console.log(cats);
var counter = 1;
// 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');

    }
    // Activate the clicked .list-group-item
    this.classList.add('active');

    // Activate the next list group
    nextListGroup = listGroup[counter];
    nextListGroup.setAttribute('data-state', 'enabled');

    nextListGroupCats = nextListGroup.querySelectorAll('a.list-group-item');
    nextCatIndex = 0;
    console.log(nextListGroupCats);
    for (; nextCatIndex < nextListGroupCats.length; nextCatIndex++) {
        var nextCat = nextListGroupCats[nextCatIndex];
        nextCat.classList.remove('disabled');
    }
    // increment the counter
    counter++;
}); // End click function
}

【问题讨论】：

您的要求 2）如何在不使用 jquery 的情况下简化这个 3）如何使用 jquery 来简化这个矛盾。你愿意改编一个 jquery 版本吗？
当然，我问这两个问题的原因是如果有人用javascript回答，我可以找出一个jquery版本，反之亦然，这样我可以学得更好。 Jquery 版本对我来说很好。

标签： javascript jquery html loops iteration

【解决方案1】：

这是解决方案。同样，这是 jquery 实现。您可以根据需要将逻辑转换为纯 js。

$(document).on("click",".list-group a[class='list-group-item']",function()
{
    alert();
    var listGroup = $(this).parent();
    if (listGroup.attr("data-state") !== "disabled") 
    {
        $(listGroup).find("a").removeClass("active");    
        $(this).addClass("active");

        var nextListGroup =
            listGroup.parent().next().find("div");
         $(nextListGroup).attr("data-state","");
         $(nextListGroup).find("a").removeClass("disabled");
    }
});

http://jsfiddle.net/j2c59j9j/6/

使用不同的选择器方法：

$(".list-group a[class^='list-group-item']").click(function()
{
    var listGroup = $(this).parent();
    if (listGroup.attr("data-state") !== "disabled") 
 {
$(listGroup).find("a").removeClass("active");    
$(this).addClass("active");

var nextListGroup =
    listGroup.parent().next().find("div");
 $(nextListGroup).attr("data-state","");
 $(nextListGroup).find("a").removeClass("disabled");
 }

});

【讨论】：

太棒了。这很好用。唯一要添加的内容是：禁止在禁用的列表组上注册点击，直到它们被启用。因为现在我可以单击第二个或第三个列表组并激活它，当它应该保持不变时单击。
你可以通过检查 $(this).hasClass("disabled") 来轻松地短路处理程序
第一个块中的代码仅适用于单击第一个列表组以激活第二个，但单击第二个不会激活第三个。在您提供的第二个代码块上，也会发生同样的情况。但是您的 jsfiddle 版本 6 中的代码按预期工作，并且与此处提供的这两种代码不同。如果您使用 jsfiddle 版本更新您提供的代码，我可以接受您的回答。
虽然我对 jsfiddle 版本 6 是如何实现这一点有点困惑，因为我没有看到任何 hasClass("disabled") 。
实际上你不需要 hasClass("disabled")。应用 class="disabled" 后，该元素就不再难以处理，并且永远不会触发“a”标签上的点击事件。我不确定你最后是如何实现它的，所以我添加了这个条件以防万一。

【解决方案2】：

我根据 DinoMyte 的回答创建了纯 javascript 版本：

https://jsbin.com/weteseq

//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');

        if (thisListGroup.getAttribute("data-state") === "disabled") {
            return false;
        } else {
            //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');

            }
            // Activate the clicked .list-group-item
            this.classList.add('active');
            //console.log(thisListGroup);

            // Activate the next list group
            nextListGroup = thisListGroup.parentElement.nextElementSibling;
            if (nextListGroup) { //if its not NULL
                nextListGroupQuery = nextListGroup.querySelector('.list-group');
                //console.log(nextListGroup);
                nextListGroupQuery.setAttribute('data-state', 'enabled');

                nextListGroupCats = nextListGroupQuery.querySelectorAll('a.list-group-item');
                nextCatIndex = 0;
                //console.log(nextListGroupCats);
                for (; nextCatIndex < nextListGroupCats.length; nextCatIndex++) {
                    var nextCat = nextListGroupCats[nextCatIndex];
                    nextCat.classList.remove('disabled');
                }
            }
        }
    }); // End click function
}

【讨论】：