対応する入力フィールドが変更されたときに1つのプログレスバーを変更します

Question

現在のところ、入力フィールドの値のいずれかが変更されると、2つのプログレスバーが変更されます。対応する入力フィールドが変更されたときに、1つの進捗バーのみを変更できますか？

$('input').on('keyup', function(){ 
 
    var value = this.value; 
 
    var bar = 
 
    $('.progress-bar') 
 
     .css('width', value+'%') 
 
     .attr('aria-valuenow', value);  
 
}).keyup();

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.0.1/jquery.min.js"></script> 
 
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0-alpha.6/css/bootstrap.min.css" integrity="sha384-rwoIResjU2yc3z8GV/NPeZWAv56rSmLldC3R/AZzGRnGxQQKnKkoFVhFQhNUwEyJ" crossorigin="anonymous"> 
 
    <script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0-alpha.6/js/bootstrap.min.js" integrity="sha384-vBWWzlZJ8ea9aCX4pEW3rVHjgjt7zpkNpZk+02D9phzyeVkE+jo0ieGizqPLForn" crossorigin="anonymous"></script> 
 
<td> 
 
<div class="form-group"> 
 
<input type="text" class="form-control"/>  
 
</div> 
 

 
<div class="progress"> 
 
    <div class="progress-bar progress-bar-success" 
 
     role="progressbar" 
 
     aria-valuenow="0" aria-valuemin="0" 
 
     aria-valuemax="100" style="width: 60%;"> 
 
     <span class="sr-only">60% Complete</span> 
 
    </div> 
 
</div> 
 
</td> 
 

 
<td></td> 
 
<div class="form-group"> 
 
<input type="text" class="form-control"/>  
 
</div> 
 

 
<div class="progress"> 
 
    <div class="progress-bar progress-bar-success" 
 
     role="progressbar" 
 
     aria-valuenow="0" aria-valuemin="0" 
 
     aria-valuemax="100" style="width: 60%;"> 
 
     <span class="sr-only">60% Complete</span> 
 
    </div> 
 
</div> 
 
</td>

Answer 1

$('.progress-bar')で、あなたはすべての.progress-bar要素を選択します。

代わりに、あなたは、親への1つ上のレベルに行く次の兄弟に移動し、そこにプログレスバーを見つける必要がある：

変更

$('.progress-bar') 

へ：

$(this).parent().next('.progress').find('.progress-bar') 

Al togehter：

$('input').on('keyup', function(){ 
    var value = this.value; 
    var bar = 
    $(this).parent().next('.progress').find('.progress-bar') 
     .css('width', value+'%') 
     .attr('aria-valuenow', value);  
}).keyup(); 

Answer 2

あなたがそれぞれにIDを割り当て、対応するjQueryのIDセレクタを使用することができます。このように：

$('input').on('keyup', function(){ 
 
    var value = this.value; 
 
    var bar = 
 
    $('#progress-bar-1') 
 
     .css('width', value+'%') 
 
     .attr('aria-valuenow', value);  
 
}).keyup();

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.0.1/jquery.min.js"></script> 
 
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0-alpha.6/css/bootstrap.min.css" integrity="sha384-rwoIResjU2yc3z8GV/NPeZWAv56rSmLldC3R/AZzGRnGxQQKnKkoFVhFQhNUwEyJ" crossorigin="anonymous"> 
 
    <script src="https://npmcdn.com/tether@1.2.4/dist/js/tether.min.js"></script> 
 
    <script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0-alpha.6/js/bootstrap.min.js" integrity="sha384-vBWWzlZJ8ea9aCX4pEW3rVHjgjt7zpkNpZk+02D9phzyeVkE+jo0ieGizqPLForn" crossorigin="anonymous"></script> 
 
<td> 
 
<div class="form-group"> 
 
<input type="text" class="form-control"/>  
 
</div> 
 

 
<div class="progress"> 
 
    <div class="progress-bar progress-bar-success" 
 
     id="progress-bar-1" 
 
     role="progressbar" 
 
     aria-valuenow="0" aria-valuemin="0" 
 
     aria-valuemax="100" style="width: 60%;"> 
 
     <span class="sr-only">60% Complete</span> 
 
    </div> 
 
</div> 
 
</td> 
 

 
<td></td> 
 
<div class="form-group"> 
 
<input type="text" class="form-control"/>  
 
</div> 
 

 
<div class="progress"> 
 
    <div class="progress-bar progress-bar-success" 
 
     id="progress-bar-2" 
 
     role="progressbar" 
 
     aria-valuenow="0" aria-valuemin="0" 
 
     aria-valuemax="100" style="width: 60%;"> 
 
     <span class="sr-only">60% Complete</span> 
 
    </div> 
 
</div> 
 
</td>

Answer 3

両方をラップする親要素にアクセスして、 "名前空間"として設定して進行状況バーを探すことができます。あなたの例では、<table>、<tr>、そして<td>のコードが欠落しているので、HTMLマークアップが有効であることを確認してください。

$('input').on('keyup', function(){ 
 
    var value = this.value; 
 
    var wrappingTd = $(this).parent().parent(); 
 
     
 
    $(' .progress-bar',wrappingTd) 
 
     .css('width', value+'%') 
 
     .attr('aria-valuenow', value);  
 
})

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.0.1/jquery.min.js"></script> 
 
<script src="https://cdnjs.cloudflare.com/ajax/libs/tether/1.4.3/js/tether.min.js"></script> 
 
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0-alpha.6/css/bootstrap.min.css" integrity="sha384-rwoIResjU2yc3z8GV/NPeZWAv56rSmLldC3R/AZzGRnGxQQKnKkoFVhFQhNUwEyJ" crossorigin="anonymous"> 
 
    <script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0-alpha.6/js/bootstrap.min.js" integrity="sha384-vBWWzlZJ8ea9aCX4pEW3rVHjgjt7zpkNpZk+02D9phzyeVkE+jo0ieGizqPLForn" crossorigin="anonymous"></script> 
 
<table><tr>  
 
<td> 
 
<div class="form-group"> 
 
<input type="text" class="form-control"/>  
 
</div> 
 

 
<div class="progress"> 
 
    <div class="progress-bar progress-bar-success" 
 
     role="progressbar" 
 
     aria-valuenow="0" aria-valuemin="0" 
 
     aria-valuemax="100" style="width: 60%;"> 
 
     <span class="sr-only">60% Complete</span> 
 
    </div> 
 
</div> 
 
</td> 
 

 
<td> 
 
<div class="form-group"> 
 
<input type="text" class="form-control"/>  
 
</div> 
 

 
<div class="progress"> 
 
    <div class="progress-bar progress-bar-success" 
 
     role="progressbar" 
 
     aria-valuenow="0" aria-valuemin="0" 
 
     aria-valuemax="100" style="width: 60%;"> 
 
     <span class="sr-only">60% Complete</span> 
 
    </div> 
 
</div> 
 
</td> 
 
</tr></table>