jQuery中具有三个字段的面积计算器（根据缺失值计算）答案

【问题标题】：Area calculator with three fields in jQuery (calculate based on missing value)jQuery中具有三个字段的面积计算器（根据缺失值计算）
【发布时间】：2011-03-11 18:14:00
【问题描述】：

我正在开发一个具有三个字段的计算器：“长度”、“宽度”、“面积”。 “面积”等于“长度”x“宽度”。但是，我的客户需要能够更新这两个字段中的任何两个以获得第三个——我目前只有在长度或宽度发生变化时才计算面积，而不能计算缺失值。

jQuery(document).ready( function ($) {
  $('input').change(function() {
    var $parent = $(this).parents("td").children("div").children("div"),
        length = $parent.find('input[id*="field-length-0-value"]').val(),
        width = $parent.find('input[id*="field-width-0-value"]').val();
        $parent.find('input[id*="field-area-0-value"]').val(length * width); 
  });
});

Source, jsbin

修改区域时如何更新长宽？

非常感谢！

【问题讨论】：

这太模棱两可了。当面积改变时，长度可以改变，宽度可以改变，或两者兼而有之。你想让长度和宽度都以相同的比例变化吗？
我应该更清楚，抱歉。用户将始终拥有 3 个值中的 2 个 - 长度和面积，或宽度和面积，或长度和宽度。如果长度或宽度发生变化，面积应该重新计算——这已经发生了。如果面积有值而长度或宽度没有，则应根据面积除以现有值来计算缺少的值。

标签： javascript jquery math area

【解决方案1】：

然后给每个输入一个唯一的 id：

$('input').change(function() {

var currentId = $(this).attr('id');
if (currentId == 'area'){
//DO AREA CALCULATIONS
}
if (currentId == 'length'){
//DO LENGTH CALCULATIONS
}
if (currentId == 'width'){
//DO WIDTH CALCULATIONS
}

});

【讨论】：

每个都有一个唯一的ID，但我事先不知道它是什么——请看上面帖子中的“Source”链接，这段代码与允许重复的Drupal CCK组件交互表单元素。
那很乱，我不太确定你在做什么？只要顺序没有改变，您就可以制作一个包含所有输入的数组，对它们进行编号，然后确定每个框是什么。显然有 id 会更好，但我不熟悉 CCK。
HTML 部分确实令人生畏，我知道。简而言之，有一系列房间，每个房间有三排：高度、宽度、面积（还有其他用于单位的字段，但暂时忽略这些）。用户可以通过单击按钮添加另一行。上面提到的三个输入的ID是这样的：edit-field-room-0-value-field-length-0-value、edit-field-room-0-value-field-width-0-value和edit- field-room-0-value-field-area-0-值；添加新行时，它变为 edit-field-room-1-value-field-length-0-value、edit-field-room-1-value-field-width-0-value 和 edit-field-room -1-value-field-area-0-value.
我觉得我需要一堆条件句，所以给 +10 的帮助。谢谢！

【解决方案2】：

嘘！我想到了。为处于类似情况的人复制以下代码：

jQuery(document).ready( function ($) {   
  $('input').change(function() {
    var currentId = $(this).attr('id'),
    $parent = $(this).parents("td").children("div").children("div"),
    lengthId = $parent.find('input[id*="field-length-0-value"]'),
    length = lengthId.val(),
    lengthAtt = lengthId.attr('id'),
    widthId = $parent.find('input[id*="field-width-0-value"]'),
    width = widthId.val(),       
    widthAtt = widthId.attr('id'),
    areaId = $parent.find('input[id*="field-area-0-value"]'),
    area = areaId.val(),
    areaAtt = areaId.attr('id');


        if ((currentId == lengthAtt) && (area == 0)){
        areaId.val(length * area); //Area when l * w
        }
        if ((currentId == lengthAtt) && (width == 0)){
        widthId.val(area / length); //width when a / l
        }
        if ((currentId == widthAtt) && (area == 0)){
        areaId.val(width * length); //area when w * l
        }
        if ((currentId == widthAtt) && (length == 0)){
        lengthId.val(area / width); //length when a / w
        }
        if ((currentId == areaAtt) && (width == 0)){
        widthId.val(area / length);//width when a / l
        }
        if ((currentId = areaAtt) && (length == 0)){
        lengthId.val(area / width); //length when a / w 
        }
  });
});

我确定有几个地方可以优化...

【讨论】：