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

Question

我在这里有我的代码有点问题。我试图完成的是获取输入字段的ID。所有感兴趣的输入字段都有一个“计数”类。他们都有相同的ID，但它增加，说field1，field2，field3。我也有一些“答案”输入。

我试图完成的机制是首先从我正在键入的输入（keyup）中获取ID。然后我继续将该值（var valueField）传递给函数updateFields（idNumber）。之后，我只需简单地将＃100的值加上100，最后我将最终值添加到其匹配的输入中，并使用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) 

    } 

提前感谢！

Answer 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" />