javascript - 选择下一个列表组并更改数据状态

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

https://jsbin.com/zakuro

我的代码越来越复杂，我想知道
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>

JS

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
}

最佳答案

这是解决方案。同样，这是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");
 }

});

关于javascript - 选择下一个列表组并更改数据状态，我们在Stack Overflow上找到一个类似的问题：https://stackoverflow.com/questions/33244860/