JavaScript中点击.btn后input排序值无法保存的问题求助

你的代码存在两个核心问题：

1. 选择器逻辑错误：$(this).closest('.number') 是向上查找当前元素的父级/祖先节点中带.number类的元素，但.btn和.number是同级关系，根本找不到目标输入框，相当于每次都在给一个不存在的元素赋值。
2. 循环赋值逻辑错误：就算找到元素，循环里也会重复给同一个元素赋值，最后只会保留最后一次的数值（也就是4），无法实现逐个输入框的有序赋值。

修正后的代码 #

JavaScript #

$('.btn').on('click', function(){
    // 获取所有带.number类的输入框集合
    const numberInputs = $('.number');
    // 遍历集合，依次给每个输入框赋值1-5
    for(let i = 0; i < numberInputs.length; i++){
        $(numberInputs[i]).val(i + 1);
    }
});

或者用jQuery的each方法实现更简洁：

$('.btn').on('click', function(){
    $('.number').each(function(index){
        // index从0开始，加1后得到1-5的序列
        $(this).val(index + 1);
    });
});

HTML（无需修改） #

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>

<div class="btn">Sort</div>

<input type="text" class="number" data-id="1" value="1">
<input type="text" class="number" data-id="5" value="5">
<input type="text" class="number" data-id="4" value="4">
<input type="text" class="number" data-id="3" value="2">
<input type="text" class="number" data-id="2" value="3">

效果验证 #

点击.btn后，所有输入框的value会依次被设置为1、2、3、4、5，完全匹配你的期望输出。

内容的提问来源于stack exchange，提问作者itlearn