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

How to manipulate individual input field values without a lot of code

本文关键字：操作 情况下 单个 输入 字段 代码      更新时间：2023-09-26

我用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（更改"选择"框后）

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

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

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

只是循环遍历它们，就像这样。

var inputs = $('.value_gpm');
for(i=0;i < inputs.length; i++){
 var input = inputs[i];
 input.val( convert(input.val(), "m3h", "gpm") );
}

最佳选择-使用$.each和$(this)。

$(document).ready(function(){
    var valueEls = $('.value_gpm');       
    $("#unit_system").change(function(){
        var unit = $(this).val();
        switch(unit){
            case "English":
            valueEls.each(function(){
                $(this).val(convert($(this).val(), "m3h", "gpm");
            });
            break;
            case "Metric":
            valueEls.each(function(){
                $(this).val(convert($(this).val(), "gpm", "m3h");
            });
            break;
        }
    });
});

使用 each（）

$("value_gpm").each(function () {
  convert(this.val(), ...etc

我为此找出的代码行数较少：

var unit_system = $('#unit_system').val();
$('.value_gpm').each(function(){
    convert($(this).val(), unit_system == "English" ? "m3h" : "gpm", unit_system == "English" ? "gpm" : "m3h");
});

你可以使用 jQuery 每个： 

$("#unit_system").change(function(){
    var fromUnit = "m3h";
    var toUnit = "gpm";
    if ($(this).val() == "Metric"){
        fromUnit = "gpm";
        toUnit = "m3h";
    }
    $('.value_gpm').each(function(){
        $(this).val(convert($(this).val(), fromUnit, toUnit));
    });
});
相关文章：