多进度条迭代不起作用

Question

我正在使用jQuery进行进度条。我使用变量传递了一个百分比值。但只有第一个值执行到所有条形码。

实际上，我想动态创建一个variable，它会为当前条形图更改一个值。

我刚开始学习jQuery。如果有任何问题，请随时告诉我们，并建议任何其他方式来做。

任何帮助将不胜感激。

＆＃13;

＆＃13;

moveProgressBar();
   
function moveProgressBar() 
{
    $('.progress-wrap').each(function() {
        var getPercent = ($('.progress-wrap').data('progress-percent') / 100);
        console.log(getPercent);        
        var getProgressWrapWidth = $('.progress-wrap').width();
        console.log(getProgressWrapWidth);
        var progressTotal = getPercent * getProgressWrapWidth;
       
        $('.progress-bar').animate({
            left: progressTotal
        }, 2500);
    });
};

＆＃13;

.progress {
  width:100%;
  height: 50px;
}
.progress-wrap {
  position: relative;
  margin: 20px 0;
  border-radius: 5px;
  overflow: hidden;
  background: #3379b7;
}
.progress-wrap .progress-bar {
  position: absolute;
  left: 0;
  top: 0;
  background: #f5f5f5;
  box-shadow: inset 0 3px 0 0 #e6e6e6;
}
.bar {
    position: absolute;
    left: -65px;
    width: 55px;
    height: 26px;
    margin: 10px 0;
    padding: 5px 0 0 0;
	font-size: 20px;
    text-align: center;
    border-radius: 5px;
    background: rgba(0,0,0,0.5);
    color: #fff;	
}

＆＃13;

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="progress-wrap progress" data-progress-percent="11">
    <div class="progress-bar progress">
        <div class="bar">11%</div>
    </div>
</div>
<div class="progress-wrap progress" data-progress-percent="6">
    <div class="progress-bar progress">
        <div class="bar">6%</div>
    </div>
</div>
<div class="progress-wrap progress" data-progress-percent="3">
    <div class="progress-bar progress">
        <div class="bar">3%</div>
    </div>
</div>
<div class="progress-wrap progress" data-progress-percent="14">
   <div class="progress-bar progress">
       <div class="bar">14%</div>
   </div>
</div>
<div class="progress-wrap progress" data-progress-percent="66">
   <div class="progress-bar progress">
       <div class="bar">66%</div>
   </div>
</div>

＆＃13;

＆＃13;

＆＃13;

Answer 1

当您使用每个功能时，您需要使用this：

		moveProgressBar();
   

    function moveProgressBar() {
        
         $('.progress-wrap').each(function() {
        var getPercent = ($(this).data('progress-percent') / 100);
        console.log(getPercent);        
        var getProgressWrapWidth = $(this).width();
        console.log(getProgressWrapWidth);
        var progressTotal = getPercent * getProgressWrapWidth;
       
        $(this).find('.progress-bar').animate({
            left: progressTotal
        }, 2500);
    });
};

.progress {
  width:100%;
  height: 50px;
}
.progress-wrap {
  position: relative;
  margin: 20px 0;
  border-radius: 5px;
  overflow: hidden;
  background: #3379b7;
}
.progress-wrap .progress-bar {
  position: absolute;
  left: 0;
  top: 0;
  background: #f5f5f5;
  box-shadow: inset 0 3px 0 0 #e6e6e6;
}
.bar {
    position: absolute;
    left: -65px;
    width: 55px;
    height: 26px;
    margin: 10px 0;
    padding: 5px 0 0 0;
	font-size: 20px;
    text-align: center;
    border-radius: 5px;
    background: rgba(0,0,0,0.5);
    color: #fff;	
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="progress-wrap progress" data-progress-percent="11">
						<div class="progress-bar progress">
							<div class="bar">11%</div>
						</div>
					</div>
					<div class="progress-wrap progress" data-progress-percent="6">
						<div class="progress-bar progress">
							<div class="bar">6%</div>
						</div>
					</div>
					<div class="progress-wrap progress" data-progress-percent="3">
						<div class="progress-bar progress">
							<div class="bar">3%</div>
						</div>
					</div>
					<div class="progress-wrap progress" data-progress-percent="14">
						<div class="progress-bar progress">
							<div class="bar">14%</div>
						</div>
					</div>
					<div class="progress-wrap progress" data-progress-percent="66">
						<div class="progress-bar progress">
							<div class="bar">66%</div>
						</div>
					</div>