jQuery 使用 class 在 keyup 上获取输入 ID 无效

Question

我的代码有点问题。我想要完成的是在键入时获取输入字段的 ID。所有感兴趣的输入字段都有一个 class "count"。它们也都具有相同的 ID，但它会递增，例如 field1、field2、field3。我也有一些 "answer" 输入。

我试图实现的机制是首先从我正在键入的输入 (keyup) 中获取 ID。然后我继续将该值 (var valueField) 传递给函数 updateFields(idNumber)。之后，我只是简单地将 100 添加到字段#x 的值，最后我将最终值附加到它的匹配输入，id 为 answerx。

我的代码不工作。有人知道为什么吗？这种方法正确吗？或者你会建议我改变什么吗？

这是我的代码：

HTML:

<input type="text" placeholder="" class="count" name="input1" id="1"/>
<input type="text" placeholder="" class="count" name="input2" id="2"/>
<input type="text" placeholder="" class="count" name="input3" id="3"/>

<input type="text" placeholder="" class="answer" name="ans1" id="answer1"/>
<input type="text" placeholder="" class="answer" name="ans2" id="answer2"/>
<input type="text" placeholder="" class="answer" name="ans3" id="answer3"/>

JavaScript:

    $(document).on('keyup','.count',function(){
        var valueField = $(this).attr('id').val();
        updateFields(valueField);
    });

    function updateFields(idNumber){

        var rawVal = $('#field' + idNumber).val();
        var final = rawVal + 100;

        $('#answer' + idNumber).val(final)

    }

提前致谢！

Answer 1

当您获得 attr('id') 时，您无需调用 .val()。此外，您获取该字段的代码假定一个以 'field' 开头的 id，最后如果您要进行文本输入并处理是一个数字，您应该调用 parseInt()（十进制的基数为 10），这将起作用：

$(document).on('keyup', '.count', function() {
  var valueField = $(this).attr('id');
  updateFields(valueField);
});

function updateFields(idNumber) {
  var rawVal = parseInt($('#' + idNumber).val(), 10);
  var final = rawVal + 100;

  $('#answer' + idNumber).val(final)

}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<input type="text" placeholder="" class="count" name="input1" id="1" />
<input type="text" placeholder="" class="count" name="input2" id="2" />
<input type="text" placeholder="" class="count" name="input3" id="3" />

<input type="text" placeholder="" class="answer" name="ans1" id="answer1" />
<input type="text" placeholder="" class="answer" name="ans2" id="answer2" />
<input type="text" placeholder="" class="answer" name="ans3" id="answer3" />

jQuery 使用 class 在 keyup 上获取输入 ID 无效

jQuery getting ID of input with class on keyup not working

javascript

jquery

input

this

keyup