Javascript 为什么进度条没有'；你不能正常工作吗？

我已经创建了一个简单的基本进度条，如果我在HTML页面中只添加一个进度元素，它就可以工作，但是如果我添加了另一个进度元素，第一个效果很好，第二个效果不理想

这是我的

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>

.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;
}

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

});

jQuery：

<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>

.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;
}

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

});

---

这是因为您正在获取所有

span

元素并对它们进行切片。所以只有前一个能正常工作

---

检查这里的工作示例：

这是因为您正在获取所有

span

元素并对它们进行切片。所以只有前一个能正常工作

检查这里的工作示例：

您必须将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

  ，即为什么它只适用于第一个进度条，而不适用于其他进度条

• 其次，您可以根据kac puan

  attr

  值，简单地将当前进度条放入变量

  thisParent

  和

  slice

  所有

  children

  span元素中

这里我更新了您的

您必须将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

  ，即为什么它只适用于第一个进度条，而不适用于其他进度条

• 其次，您可以根据kac puan

  attr

  值，简单地将当前进度条放入变量

  thisParent

  和

  slice

  所有

  children

  span元素中

这里我更新了你的