Question

目前两者都有，当其中一个输入字段的值发生变化时，两个进度条会发生变化。我只能在更改相应的输入字段时更改一个进度条吗？

$('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元素。

相反，您需要向父级上一级，转到下一级兄弟，并在那里找到进度条：

更改

$('.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

您可以访问包装两者的父元素，并将其设置为＆＃34;命名空间＆＃34;寻找进度条。只需确保您的HTML标记有效，因为您的示例中缺少<table>，<tr>的代码，并且您的<td>也会错过。

＆＃13;

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

＆＃13;

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

＆＃13;

Answer 3

您可以为每个ID分配ID并使用相应的jQuery ID选择器。像这样：

＆＃13;

lock_guard

＆＃13;

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

＆＃13;

更改相应输入字段时更改一个进度条

3 个答案: