我创建了一个简单的基本进度条,如果我在 HTML 页面中只添加一个进度元素,但是如果我添加了另一个进度元素,那么首先效果非常好,但第二个不符合预期。< / p>
这是我的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");
});
});
答案 0 :(得分:2)
您必须将 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
span 元素按照 kac-puan attr
值。
我已更新您的Codepen
答案 1 :(得分:0)
这是因为您获得了所有span
元素并对其进行切片。所以只有第一个正常工作。
点击此处查看工作示例:https://jsfiddle.net/hrv27bx3/