jQuery在keyup上使用类获取输入ID不起作用答案

【问题标题】：jQuery getting ID of input with class on keyup not workingjQuery在keyup上使用类获取输入ID不起作用
【发布时间】：2015-02-11 19:47:39
【问题描述】：

我的代码有点问题。我想要完成的是在键上获取输入字段的 ID。所有感兴趣的输入字段都有一个类“计数”。它们都具有相同的 ID，但会递增，例如 field1、field2、field3。我也有一些“答案”输入。

我试图完成的机制是首先从我正在输入的输入中获取 ID（keyup）。然后我继续将该值 (var valueField) 传递给函数 updateFields(idNumber)。之后，我只是简单地将 100 添加到 field#x 的值，最后我将最终值附加到其匹配的输入，并带有 answerx 的 id。

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

这是我的代码：

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)

    }

提前致谢！

【问题讨论】：

标签： javascript jquery input this keyup

【解决方案1】：

当您收到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="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" />

【讨论】：