複数のプログレスバー反復が機能しない

Question

jQueryを使用して進行状況バーを実行しています。変数を使ってパーセンテージ値を渡しました。しかし、最初の値だけがすべてのバーに実行されます。

実際には、現在のバーの値が変更されたvariableを動的に作成します。

jQueryの学習を始めたばかりです。何かが間違っている場合は、お気軽にお気軽にご連絡ください。

ありがとうございます。ありがとうございました。

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

.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; 
 
\t font-size: 20px; 
 
    text-align: center; 
 
    border-radius: 5px; 
 
    background: rgba(0,0,0,0.5); 
 
    color: #fff; \t 
 
}

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

Answer 1

あなたがthisを使用する必要がある各機能を使用していたよう：

\t \t 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; 
 
\t font-size: 20px; 
 
    text-align: center; 
 
    border-radius: 5px; 
 
    background: rgba(0,0,0,0.5); 
 
    color: #fff; \t 
 
}

<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"> 
 
\t \t \t \t \t \t <div class="progress-bar progress"> 
 
\t \t \t \t \t \t \t <div class="bar">11%</div> 
 
\t \t \t \t \t \t </div> 
 
\t \t \t \t \t </div> 
 
\t \t \t \t \t <div class="progress-wrap progress" data-progress-percent="6"> 
 
\t \t \t \t \t \t <div class="progress-bar progress"> 
 
\t \t \t \t \t \t \t <div class="bar">6%</div> 
 
\t \t \t \t \t \t </div> 
 
\t \t \t \t \t </div> 
 
\t \t \t \t \t <div class="progress-wrap progress" data-progress-percent="3"> 
 
\t \t \t \t \t \t <div class="progress-bar progress"> 
 
\t \t \t \t \t \t \t <div class="bar">3%</div> 
 
\t \t \t \t \t \t </div> 
 
\t \t \t \t \t </div> 
 
\t \t \t \t \t <div class="progress-wrap progress" data-progress-percent="14"> 
 
\t \t \t \t \t \t <div class="progress-bar progress"> 
 
\t \t \t \t \t \t \t <div class="bar">14%</div> 
 
\t \t \t \t \t \t </div> 
 
\t \t \t \t \t </div> 
 
\t \t \t \t \t <div class="progress-wrap progress" data-progress-percent="66"> 
 
\t \t \t \t \t \t <div class="progress-bar progress"> 
 
\t \t \t \t \t \t \t <div class="bar">66%</div> 
 
\t \t \t \t \t \t </div> 
 
\t \t \t \t \t </div>