Question

单击列表组时，我需要选择下一个（以下）列表组并将其更改为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>

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
}

Answer 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");
 }

});

Answer 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
}

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

2 个答案: