Javascript 多个输入副本的Jquery输入更新（带剩余字符）

关于更新文本字段（字符数），我有一个小问题。 这是密码

function updateCountdowt() {
            var remainingt = 30 - jQuery('.account-edit-field').val().length;
            jQuery('.input-text-count').text(remainingt);
}

$(document).ready(function(){   
        updateCountdowt();
        $('input.account-edit-field').on('keyup', function() {
            updateCountdowt();
        });
        $('input.account-edit-field').on('change', function() {
            updateCountdowt();
        });
});

主要问题是，我有多个类“.account edit field”的输入。这里有一个奇怪的事情开始了，如果我编辑第一个输入，一切都很好。如果我将在第一次输入中留下一些文本-所有其他文本将显示第一次输入中的剩余字符，而不会显示当前输入中的剩余字符（第一次输入除外）。如何更改代码，使其仅适用于当前输入，而不适用于页面上的每个输入？以下是HTML结构：

<div class="account-edit-group">    
                    <input type="text" value="" class="account-edit-field">
                    <span class="input-text-count"></span>
                    <div>
                        <button class="account-edit-field-save"> </button><button class="account-edit-field-cancel"> </button>
                    </div>                                  
                    <div class="account-edit-field-warning"><span class="w-text"></span></div>
</div>

像这样使用

     $('input.account-edit-field').on('keyup', function() {
        $(this).next('.input-text-count').text(30-$(this).val().length);
    });
    $('input.account-edit-field').on('change', function() {
         $(this).next('.input-text-count').text(30-$(this).val().length);
    });

如果要使用长度限制输入，可以在输入字段中使用

maxlength

属性

<input type="text" value="" maxlength="30" class="account-edit-field">

---

问题是updateCountdown不知道您指的是哪个输入字段。只需更新.on（）函数中的值，并使用$（this）引用当前元素

HTML:

<div class="account-edit-group">    
                    <input type="text" class="account-edit-field">
                    <span class="input-text-count">30</span>
                    <input type="text" class="account-edit-field">
                    <span class="input-text-count">30</span>
                    <input type="text" class="account-edit-field">
                    <span class="input-text-count">30</span>                                                        
</div>

$(document).ready(function(){   
        $('.account-edit-group').on('keyup', "input", function() {
            var remaining = 30 - $(this).val().length;
            $(this).next().text(remaining);
        });
});

很好，谢谢你（我会在7分钟内接受你的回答）。