爲什麼進度條無法正常工作？

Question

如果我在我的HTML頁面中添加一個進度元素，但是如果我添加了另一個進度元素，則首先運行得非常好，但其次並非如預期的那樣，我創建了一個簡單的基本進度條。

這裏是我的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

你必須改變你的的jQuery功能：

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

}); 

• 你的功能將只能得到第一個attr遇到進度條而不是你必須得到attr每個進度條即爲什麼它只爲第一個而不是爲其他人工作。

• 其次，你可以簡單地利用當前進度條到一個變量thisParent和slice所有children跨度元素，每有KAC-普安attr值。

在這裏，我已經更新了你的Codepen

Answer 2

這是因爲您正在獲取所有span元素並對其進行切片。所以只有第一個正常工作。

檢查這裏的工作示例：https://jsfiddle.net/hrv27bx3/