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

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

来源

2015-10-20 TetraDev

您的需求2）如何简化这个不使用jQuery 3）如何使用jquery矛盾这个简化。你会愿意去适应一个jQuery版本吗？ – DinoMyte

当然，我问这两个问题的原因是如果有人用javascript回答，我可以找出一个jQuery版本，反之亦然，所以我可以更好地学习。 Jquery版本对我来说很好。 – TetraDev

这里的解决方案。再次，这是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"); 
} 

});

来源

2015-10-20 19:51:24 DinoMyte

太棒了。这很好。唯一需要添加的是：禁用点击从禁用列表组注册，直到它们变为启用状态。因为现在我可以点击第二个或第三个列表组，并且它会被激活，当它保持不变时点击。 – TetraDev

您可以通过检查$（this）.hasClass（“disabled”） – Louis

是否对代码进行更改来处理该代码，从而轻松缩短处理程序的短路。 – DinoMyte

我创建了一个基于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 
}

来源

2015-10-20 21:17:25 TetraDev

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

回答

相关问题