使用jQuery和Drupal6自动更新宽度/长度/面积

Question

我正在使用Drupal创建测量表（Measurement sheets in Drupal 6），并且在所有字段都已到位的地方，我只需要编写一些jQuery当用户输入数据时自动更新适当的字段。下面的代码：

jQuery(document).ready(function ($) { 


$('input').change(

    function() { 
    $parent = $(this).parent("td").children("div").children("div"); 
    length = $parent.children("div[id*='field-length-0-wrapper']").children("div.container-inline").children('div[id*="field-length-0-value-wrapper"]').children('input[id*="field-length-0-value"]').val(); // get the width 
    width = $parent.children("div[id*='field-width-0-wrapper']").children("div.container-inline").children('div[id*="field-width-0-value-wrapper"]').children('input[id*="field-width-0-value"]').val(); // get the length 
    $parent.children("div[id*='field-area-0-wrapper']").children("div.container-inline").children('div[id*="field-area-0-value-wrapper"]').children('input[id*="field-area-0-value"]').val(length * width); //put area 
    } 
); 

}); 

此相互作用与以下形式的代码：

<thead class="tableHeader-processed"><tr><th colspan="2">Measurements: </th> </tr></thead> 
<tbody> 
<tr class="draggable odd"><td class="content-multiple-drag"><a title="Drag to re-order" href="#" class="tabledrag-handle"><div class="handle">&nbsp;</div></a></td><td><div class="form-item" id="edit-field-room-0-wrapper"> 
<div class="form-item" id="edit-field-room-0-value-wrapper"> 
<div class="form-item" id="edit-field-room-0-value-field-roomname-0-value-wrapper"> 
<label for="edit-field-room-0-value-field-roomname-0-value">Room: </label> 
<input autocomplete="OFF" name="field_room[0][value][field_roomname][0][value]" id="edit-field-room-0-value-field-roomname-0-value" size="50" value="" class="form-text form-autocomplete text" type="text"> 
</div> 
<input class="autocomplete autocomplete-processed" id="edit-field-room-0-value-field-roomname-0-value-autocomplete" value="http://www.imeasure.hairysquid.net/autocomplete_widgets/room/field_roomname" disabled="disabled" type="hidden"><div class="form-item" id="edit-field-room-0-value-field-length-0-wrapper"> 
<label for="edit-field-room-0-value-field-length-0">Length: </label> 
<div class="container-inline"><div class="form-item" id="edit-field-room-0-value-field-length-0-value-wrapper"> 
<input maxlength="16" name="field_room[0][value][field_length][0][value]" id="edit-field-room-0-value-field-length-0-value" size="24" value="" class="form-text formatted-number formatted-number-processed" decimals="2" type="text"> 
</div> 
<div class="form-item" id="edit-field-room-0-value-field-length-0-unit-wrapper"> 
<select name="field_room[0][value][field_length][0][unit]" class="form-select" id="edit-field-room-0-value-field-length-0-unit"><option value="" selected="selected">---</option><option value="length_meter">m</option><option value="length_foot">ft</option><option value="length_inch">in</option></select> 
</div> 
</div> 
</div> 
<div class="form-item" id="edit-field-room-0-value-field-width-0-wrapper"> 
<label for="edit-field-room-0-value-field-width-0">Width: </label> 
<div class="container-inline"><div class="form-item" id="edit-field-room-0-value-field-width-0-value-wrapper"> 
<input maxlength="16" name="field_room[0][value][field_width][0][value]" id="edit-field-room-0-value-field-width-0-value" size="24" value="" class="form-text formatted-number formatted-number-processed" decimals="2" type="text"> 
</div> 
<div class="form-item" id="edit-field-room-0-value-field-width-0-unit-wrapper"> 
<select name="field_room[0][value][field_width][0][unit]" class="form-select" id="edit-field-room-0-value-field-width-0-unit"><option value="" selected="selected">---</option><option value="length_meter">m</option><option value="length_foot">ft</option><option value="length_inch">in</option></select> 
</div> 
</div> 
</div> 
<div class="form-item" id="edit-field-room-0-value-field-area-0-wrapper"> 
<label for="edit-field-room-0-value-field-area-0">Area: </label> 
<div class="container-inline"><div class="form-item" id="edit-field-room-0-value-field-area-0-value-wrapper"> 
<input maxlength="16" name="field_room[0][value][field_area][0][value]" id="edit-field-room-0-value-field-area-0-value" size="24" value="" class="form-text formatted-number formatted-number-processed" decimals="2" type="text"> 
</div> 
<div class="form-item" id="edit-field-room-0-value-field-area-0-unit-wrapper"> 
<select name="field_room[0][value][field_area][0][unit]" class="form-select" id="edit-field-room-0-value-field-area-0-unit"><option value="" selected="selected">---</option><option value="area_square_foot">ft2</option><option value="area_square_meter">m2</option></select> 
</div> 
</div> 
</div> 

</div> 

</div> 
</td><td style="display: none;" class="delta-order"><div class="form-item" id="edit-field-room-0--weight-wrapper"> 
<select name="field_room[0][_weight]" class="form-select field_room-delta-order" id="edit-field-room-0--weight"><option value="-2">-2</option><option value="-1">-1</option><option value="0" selected="selected">0</option><option value="1">1</option><option value="2">2</option></select> 
</div> 
</td> </tr> 
<tr class="draggable even"><td class="content-multiple-drag"><a title="Drag to re-order" href="#" class="tabledrag-handle"><div class="handle">&nbsp;</div></a></td><td><div class="form-item" id="edit-field-room-1-wrapper"> 
<div class="form-item" id="edit-field-room-1-value-wrapper"> 
<div class="form-item" id="edit-field-room-1-value-field-roomname-0-value-wrapper"> 
<label for="edit-field-room-1-value-field-roomname-0-value">Room: </label> 
<input autocomplete="OFF" name="field_room[1][value][field_roomname][0][value]" id="edit-field-room-1-value-field-roomname-0-value" size="50" value="" class="form-text form-autocomplete text" type="text"> 
</div> 
<input class="autocomplete autocomplete-processed" id="edit-field-room-1-value-field-roomname-0-value-autocomplete" value="http://www.imeasure.hairysquid.net/autocomplete_widgets/room/field_roomname" disabled="disabled" type="hidden"><div class="form-item" id="edit-field-room-1-value-field-length-0-wrapper"> 
<label for="edit-field-room-1-value-field-length-0">Length: </label> 
<div class="container-inline"><div class="form-item" id="edit-field-room-1-value-field-length-0-value-wrapper"> 
<input maxlength="16" name="field_room[1][value][field_length][0][value]" id="edit-field-room-1-value-field-length-0-value" size="24" value="" class="form-text formatted-number formatted-number-processed" decimals="2" type="text"> 
</div> 
<div class="form-item" id="edit-field-room-1-value-field-length-0-unit-wrapper"> 
<select name="field_room[1][value][field_length][0][unit]" class="form-select" id="edit-field-room-1-value-field-length-0-unit"><option value="" selected="selected">---</option><option value="length_meter">m</option><option value="length_foot">ft</option><option value="length_inch">in</option></select> 
</div> 
</div> 
</div> 
<div class="form-item" id="edit-field-room-1-value-field-width-0-wrapper"> 
<label for="edit-field-room-1-value-field-width-0">Width: </label> 
<div class="container-inline"><div class="form-item" id="edit-field-room-1-value-field-width-0-value-wrapper"> 
<input maxlength="16" name="field_room[1][value][field_width][0][value]" id="edit-field-room-1-value-field-width-0-value" size="24" value="" class="form-text formatted-number formatted-number-processed" decimals="2" type="text"> 
</div> 
<div class="form-item" id="edit-field-room-1-value-field-width-0-unit-wrapper"> 
<select name="field_room[1][value][field_width][0][unit]" class="form-select" id="edit-field-room-1-value-field-width-0-unit"><option value="" selected="selected">---</option><option value="length_meter">m</option><option value="length_foot">ft</option><option value="length_inch">in</option></select> 
</div> 
</div> 
</div> 
<div class="form-item" id="edit-field-room-1-value-field-area-0-wrapper"> 
<label for="edit-field-room-1-value-field-area-0">Area: </label> 
<div class="container-inline"><div class="form-item" id="edit-field-room-1-value-field-area-0-value-wrapper"> 
<input maxlength="16" name="field_room[1][value][field_area][0][value]" id="edit-field-room-1-value-field-area-0-value" size="24" value="" class="form-text formatted-number formatted-number-processed" decimals="2" type="text"> 
</div> 
<div class="form-item" id="edit-field-room-1-value-field-area-0-unit-wrapper"> 
<select name="field_room[1][value][field_area][0][unit]" class="form-select" id="edit-field-room-1-value-field-area-0-unit"><option value="" selected="selected">---</option><option value="area_square_foot">ft2</option><option value="area_square_meter">m2</option></select> 
</div> 
</div> 
</div> 

</div> 

</div> 
</td><td style="display: none;" class="delta-order"><div class="form-item" id="edit-field-room-1--weight-wrapper"> 
<select name="field_room[1][_weight]" class="form-select field_room-delta-order" id="edit-field-room-1--weight"><option value="-2">-2</option><option value="-1">-1</option><option value="0">0</option><option value="1" selected="selected">1</option><option value="2">2</option></select> 
</div> 
</td> </tr> 
</tbody> 

这将显示室块 - 注意到field_room []值。基本上我做的是创建两个CCK内容类型 - 表单和房间。房间有四个文本字段：名称，宽度，长度，面积 - 按此顺序。名称是自动填充字段，宽度，长度和面积是测量值字段，意思是可以切换单位。然后，在Sheet内容类型中，我使用flexinode创建重复的一系列房间内容类型。

我的jQuery有什么问题？

任何帮助表示赞赏。 :)

Answer 1

在jQuery代码，应该有用于parents代替parent为td查找：

$parent = $(this).parents("td").children("div").children("div"); 

这使得要计算的面积值一次宽度或长度被改变。

编辑：

还有的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); 
    }); 
});