選擇下一個列表組並更改數據狀態

當單擊某個列表組時，我需要選擇下一個（以下）列表組並將其更改爲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

選擇下一個列表組並更改數據狀態

回答

相關問題