javascript - 如何在没有大量代码的情况下操作单个输入字段值

Question

我使用 jQuery 编写了一些代码来转换 <input>字段值从一种单位制转换为另一种单位制(英制 <-> 公制)。一切都很顺利，直到我意识到我正在使用类选择器，因此不是每个值单独进行转换，而是所有值(具有相同的类)都转换为相同的值(等于第一次出现 class ) )。

一个明显的解决方案是分配 id我认为这会起作用，但我来这里是想问是否有更好的方法。我有很多值(这就是我尝试使用类的原因)，并且想避免使用 id ， 如果可能的话。但是，我所寻找的是“单独转换每个值(使用我的转换函数)”。如何做到这一点？

jQuery

function convertValues() {
    if ($('#unit_system').val() == "English") //if changed to English
    {
        $('.value_gpm').val(    //do converstion from Metric to English
            convert($('.value_gpm').val(), "m3h", "gpm")
         );
    }
    else if ($('#unit_system').val() == "Metric") //if changed to Metric
    {
        $('.value_gpm').val(    //do conversion from English to Metric
            convert($('.value_gpm').val(), "gpm", "m3h")
         );
    }
}

调用函数

//below code is for select box (HTML for it is not shown)
$("#unit_system").change(function(){ //select box change detected
    convertValues();    //function is called
});

首先是 HTML(选择框更改之前)

<input type="text" class="value_gpm" name="design_a" value="444" />
<input type="text" class="value_gpm" name="design_b" value="555" />
<input type="text" class="value_gpm" name="design_c" value="666" />
<input type="text" class="value_gpm" name="design_d" value="777" />
<input type="text" class="value_gpm" name="design_e" value="888" />

HTML after(选择框更改后)

<input type="text" class="value_gpm" name="design_a" value="1954.87" />
<input type="text" class="value_gpm" name="design_b" value="1954.87" />
<input type="text" class="value_gpm" name="design_c" value="1954.87" />
<input type="text" class="value_gpm" name="design_d" value="1954.87" />
<input type="text" class="value_gpm" name="design_e" value="1954.87" />

预期行为:转换每行产生不同的值

实际行为:为每行生成相同的值

Answer 1

只需循环它们，就像这样。

var inputs = $('.value_gpm');

for(i=0;i < inputs.length; i++){
 var input = inputs[i];

 input.val( convert(input.val(), "m3h", "gpm") );
}