在jQuery中有三個字段的面積計算器

我正在研究一個計算器，它有三個字段：「長度」，「寬度」，「面積」。「面積」等於「長度」×「寬度」。但是，我的客戶需要能夠更新這些字段中的任何兩個以獲得第三個字段 - 我目前只在長度或寬度發生變化時才計算區域，並且無法計算缺失值。在jQuery中有三個字段的面積計算器

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

如何讓我的長度或寬度更新時區已修改？

非常感謝！

來源

2011-03-11 aendrew

這也太曖昧。當區域改變時，長度可以改變，寬度可以改變，或者兩者都改變。你想要長度和寬度都改變相同的比例嗎？ – 2011-03-11 18:21:27

我應該更清楚，道歉。用戶將始終有3個值中的2個 - 長度和麪積，寬度和麪積，或者長度和寬度。如果長度或寬度發生變化，區域應該重新計算 - 這已經發生。如果面積有一個值，長度或寬度都不是，則應從面積除以現有值來計算所丟失的值。 – aendrew 2011-03-11 18:47:55

好哇！我想到了。類似的情況下面複製代碼爲某人：

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 
     } 
    }); 
});

我敢肯定有地方可以優化的幾個地方......

來源

2011-03-11 19:42:37 aendrew

給每個輸入然後一個唯一的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 
} 

});

來源

2011-03-11 18:20:36

每個都有一個唯一的ID，但我不知道它是什麼 - 請看上面的帖子中的「Source」鏈接，這段代碼與一個允許可重複表單元素的Drupal CCK組件交互。 – aendrew 2011-03-11 18:27:16

這很雜亂，我不確定你在做什麼？只要訂單不變，您可以製作所有輸入的數組，然後對它們進行編號，然後確定每個盒子的來源。顯然有ids會更好，但我不熟悉CCK。 – 2011-03-11 18:33:33

我知道，HTML部分真的讓人望而生畏。簡而言之，有一系列的房間，每個房間都有三排：高度，寬度，面積（單位有其他字段，但現在忽略這些字段）。用戶可以通過單擊按鈕添加另一行。上面提到的三個輸入的ID類似於：edit-field-room-0-value-field-length-0-value，edit-field-room-0-value-field-width-0-value，and edit-場室-0 - 值字段個區域0值;當添加新行時，它變爲編輯字段空間1值字段長度0值，編輯字段空間1值字段寬度0值和編輯字段空間-1 - 值字段個區域0值。 – aendrew 2011-03-11 18:52:25

在jQuery中有三個字段的面積計算器

回答

相關問題