Warum die Fortschrittsanzeige nicht richtig funktioniert?

Question

Ich habe eine einfache grundlegende Fortschrittsbalken erstellt funktioniert es, wenn ich nur ein Fortschrittselement in meinem HTML Seite hinzufügen, aber wenn ich ein anderes hinzugefügt, funktioniert zunächst sehr gut, aber nicht wie erwartet.

Hier ist mein Codepen

HTML:

<div class="ani-progressbar"> 
    <div class="fill-progress" kac-puan="8"> 
     <span></span> 
     <span></span> 
     <span></span> 
     <span></span> 
     <span></span> 
     <span></span> 
     <span></span> 
     <span></span> 
     <span></span> 
     <span></span> 
    </div> 
</div> 
<div class="ani-progressbar"> 
    <div class="fill-progress" kac-puan="10"> 
     <span></span> 
     <span></span> 
     <span></span> 
     <span></span> 
     <span></span> 
     <span></span> 
     <span></span> 
     <span></span> 
     <span></span> 
     <span></span> 
    </div> 
</div> 
<script src="https://code.jquery.com/jquery-3.1.0.min.js"></script> 

CSS:

.ani-progressbar{ 
    width:100%; 
    height:5px; 
    margin-bottom:10px; 
} 
.fill-progress span{ 
    display:block; 
    width:5px; 
    height:5px; 
    border:1px solid #9ad204; 
    float:left; 
    margin-left:1px; 
} 

jQuery:

$(document).ready(function(){ 

    var getVal = $(".ani-progressbar .fill-progress").attr("kac-puan"); 
    $(".ani-progressbar .fill-progress span").slice(0,getVal).each(function(index,element){ 

    $(this).css("background","#9ad204"); 
    }); 

}); 

Answer 1

Sie haben Ihre jQuery Funktion ändern:

$(document).ready(function() { 
    $(".ani-progressbar .fill-progress").each(function() { 
     var getVal = $(this).attr("kac-puan"); 
     var thisParent = $(this); 
     thisParent.children('span').slice(0, getVal).each(function(index, element) { 
      $(this).css("background", "#9ad204"); 
     }); 
    }); 

}); 

• Ihre Funktion nur die attr der ersten Fortschrittsbalken gestoßen erhalten anstelle davon müssen Sie attr von jedem Fortschrittsbalken erhalten also warum es nur für die ersten nicht funktioniert.

• Zweitens können Sie einfach nehmen aktuelle Fortschrittsbalken in eine Variable thisParent und slice die alle childrenSpanne Elemente wie pro es KAC-puanattr Wert.

Hier habe ich aktualisiert Ihre Codepen

Answer 2

Es ist, weil Sie alle span Elemente erhalten und sie schneiden. Also nur der erste funktioniert einwandfrei.

prüfen für das Arbeitsbeispiel: https://jsfiddle.net/hrv27bx3/