jQuery获取keyup上带有类的输入的ID不起作用

jQuery getting ID of input with class on keyup not working

本文关键字：输入 ID 不起作用 获取 keyup jQuery      更新时间：2023-09-29

我的代码有点问题。我试图完成的是在key up上获取输入字段的ID。所有感兴趣的输入字段都有一个类"count"。它们也都有相同的ID，但它是递增的，比如field1、field2、field3。我也有一些"答案"输入。

我试图实现的机制是首先从我输入的输入中获取ID（keyup）。然后，我继续将该值（var valueField）传递给函数updateFields（idNumber）。之后，我只需将字段#x的值加100，最后将最终值附加到其匹配输入中，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="answerswer" name="answers1" id="answerswer1"/>
<input type="text" placeholder="" class="answerswer" name="answers2" id="answerswer2"/>
<input type="text" placeholder="" class="answerswer" name="answers3" id="answerswer3"/>

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

提前感谢！

当您获得attr('id')时，您不需要调用.val()。此外，您获取字段的代码假设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="answerswer" name="answers1" id="answerswer1" />
<input type="text" placeholder="" class="answerswer" name="answers2" id="answerswer2" />
<input type="text" placeholder="" class="answerswer" name="answers3" id="answerswer3" />

相关文章：