Javascript 当一个进度条对应的输入字段更改时，请更改该进度条

当前，对于这两种情况，当其中一个输入字段的值更改时，两个进度条将更改。当一个进度条对应的输入字段发生更改时，我是否只能更改该进度条

$（'input'）。在（'keyup'，function（）上{
var值=此值；
变量条=
$（“.进度条”）
.css（'width'，value+'%'））
.attr（'aria-valuenow'，value）；
}).keyup（）

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


$（'input'）。在（'keyup'，function（）上{
var值=此值；
变量条=
$（“#进度条-1”）
.css（'width'，value+'%'））
.attr（'aria-valuenow'，value）；
}).keyup（）

完成60%
完成60%
使用
$（'.progress bar'）
选择所有
.progress bar
元素

相反，您需要上升一级到父级，转到下一个同级，并在那里找到进度条：

改变

$('.progress-bar')

致：

艾尔·托格特：

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

您可以访问包装两者的父元素，并将其设置为“名称空间”，以查找进度条。只要确保您的HTML标记是有效的，就像在您的示例中，您的
缺少代码，
，并且您的
也放错了位置


$（'input'）。在（'keyup'，function（）上{
var值=此值；
var wrappingTd=$（this.parent（）.parent（）；
$（'.progress bar'，wrappingTd）
.css（'width'，value+'%'））
.attr（'aria-valuenow'，value）；
})

完成60%
完成60%
您正在使用一个类选择器-当然，两个栏都会改变。可以使用两个不同的类选择器，也可以使用id。您可以在输入字段中添加自定义属性，指定应更改的进度条-请参阅下面的我的答案。如果td的编号未知，因为它取决于数据库行的编号，所以不能为每行硬编码id如果输入的编号未知，因为这取决于数据库行的编号，所以不能为每行硬编码id谢谢您的帮助
$('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();