使用jQuery和Drupal6自动更新宽度/长度/面积 [英] Auto-updating width/length/area using jQuery and Drupal6
本文介绍了使用jQuery和Drupal6自动更新宽度/长度/面积的处理方法，对大家解决问题具有一定的参考价值，需要的朋友们下面随着小编来一起学习吧！
问题描述
我正在使用Drupal创建一个测量表（ 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）。 [id * =field-length-0-value-wrapper]'）。children（'input [id * =field-length-0-value]'）val（）; //获取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（）; //获取长度
$ parent。儿童（ DIV [ID * = '字段区域-0-包装']）。儿童（ div.container内联）。孩子（'DIV [ID * =场区-0值的包装器]'）。children（'input [id * =field-area-0-value]'）。val（length * width）; // put area
}
）;
}）;
这与以下表单代码进行交互：
< thead class =tableHeader-processed>< tr>< th colspan =2>测量：< / th& < / TR>< / THEAD>
< tbody>
< tr class =draggable odd>< td class =content-multiple-drag>< a title =拖动以重新排序href =＃class =tabledrag -handle>< div class =handle>& nbsp;< / div>< / a>< / td>< td>< div class =form-itemid = 编辑场室内-0-包装 >
< div class =form-itemid =edit-field-room-0-value-wrapper>
< div class =form-itemid =edit-field-room-0-value-field-roomname-0-value-wrapper>
< label for =edit-field-room-0-value-field-roomname-0-value>房间：< / label>
< input autocomplete =OFFname =field_room [0] [value] [field_roomname] [0] [value]id =edit-field-room-0-value-field-roomname-0 -valuesize =50value =class =form-text form-autocomplete texttype =text>
< / div>
< input class =autocomplete autocomplete-processedid =edit-field-room-0-value-field-roomname-0-value-autocompletevalue =http：//www.imeasure.hairsquid .net / autocomplete_widgets / room / field_roomnamedisabled =disabledtype =hidden>< div class =form-itemid =edit-field-room-0-value-field-length-0-包装>
< label for =edit-field-room-0-value-field-length-0> Length：< / label>
< div class =container-inline>< div class =form-itemid =edit-field-room-0-value-field-length-0-value-wrapper> ;
< input maxlength =16name =field_room [0] [value] [field_length] [0] [value]id =edit-field-room-0-value-field-length-0 -valuesize =24value =class =form-text formatted-number formatted-number-processeddecimals =2type =text>
< / div>
< div class =form-itemid =edit-field-room-0-value-field-length-0-unit-wrapper>
< select name =field_room [0] [value] [field_length] [0] [unit]class =form-selectid =edit-field-room-0-value-field-length -0-unit>< option value =selected =selected> ---< / option>< option value =length_meter> m< / option>< option value =在< / option>< / select>中，length_foot> ft< / option>< option value =length_inch>
< / div>
< / div>
< / div>
< div class =form-itemid =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-itemid =edit-field-room-0-value-field-width-0-value-wrapper> ;
< input maxlength =16name =field_room [0] [value] [field_width] [0] [value]id =edit-field-room-0-value-field-width-0 -valuesize =24value =class =form-text formatted-number formatted-number-processeddecimals =2type =text>
< / div>
< div class =form-itemid =edit-field-room-0-value-field-width-0-unit-wrapper>
< select name =field_room [0] [value] [field_width] [0] [unit]class =form-selectid =edit-field-room-0-value-field-width -0-unit>< option value =selected =selected> ---< / option>< option value =length_meter> m< / option>< option value =在< / option>< / select>中，length_foot> ft< / option>< option value =length_inch>
< / div>
< / div>
< / div>
< div class =form-itemid =edit-field-room-0-value-field-area-0-wrapper>
< label for =edit-field-room-0-value-field-area-0>区域：< / label>
< div class =container-inline>< div class =form-itemid =edit-field-room-0-value-field-area-0-value-wrapper> ;
< input maxlength =16name =field_room [0] [value] [field_area] [0] [value]id =edit-field-room-0-value-field-area-0 -valuesize =24value =class =form-text formatted-number formatted-number-processeddecimals =2type =text>
< / div>
< div class =form-itemid =edit-field-room-0-value-field-area-0-unit-wrapper>
< select name =field_room [0] [value] [field_area] [0] [unit]class =form-selectid =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> m 2的; /选项>< /选择>
< / div>
< / div>
< / div>
< / div>
< / div>
< / td>< td style =display：none; class =delta-order>< div class =form-itemid =edit-field-room-0-weight-wrapper>
< select name =field_room [0] [_ weight]class =form-select field_room-delta-orderid =edit-field-room-0-weight>< option value = - 2> -2< / option>< option value = - 1> -1< / option>< option value =0selected =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 =拖动以重新排序href =＃class =tabledrag -handle>< div class =handle>& nbsp;< / div>< / a>< / td>< td>< div class =form-itemid = 编辑场室内-1-包装>
< div class =form-itemid =edit-field-room-1-value-wrapper>
< div class =form-itemid =edit-field-room-1-value-field-roomname-0-value-wrapper>
< label for =edit-field-room-1-value-field-roomname-0-value>房间：< / label>
< input autocomplete =OFFname =field_room [1] [value] [field_roomname] [0] [value]id =edit-field-room-1-value-field-roomname-0 -valuesize =50value =class =form-text form-autocomplete texttype =text>
< / div>
< input class =autocomplete autocomplete-processedid =edit-field-room-1-value-field-roomname-0-value-autocompletevalue =http：//www.imeasure.hairysquid .net / autocomplete_widgets / room / field_roomnamedisabled =disabledtype =hidden>< div class =form-itemid =edit-field-room-1-value-field-length-0-包装>
< label for =edit-field-room-1-value-field-length-0> Length：< / label>
< div class =container-inline>< div class =form-itemid =edit-field-room-1-value-field-length-0-value-wrapper> ;
< input maxlength =16name =field_room [1] [value] [field_length] [0] [value]id =edit-field-room-1-value-field-length-0 -valuesize =24value =class =form-text formatted-number formatted-number-processeddecimals =2type =text>
< / div>
< div class =form-itemid =edit-field-room-1-value-field-length-0-unit-wrapper>
< select name =field_room [1] [value] [field_length] [0] [unit]class =form-selectid =edit-field-room-1-value-field-length -0-unit>< option value =selected =selected> ---< / option>< option value =length_meter> m< / option>< option value =在< / option>< / select>中，length_foot> ft< / option>< option value =length_inch>
< / div>
< / div>
< / div>
< div class =form-itemid =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-itemid =edit-field-room-1-value-field-width-0-value-wrapper> ;
< input maxlength =16name =field_room [1] [value] [field_width] [0] [value]id =edit-field-room-1-value-field-width-0 -valuesize =24value =class =form-text formatted-number formatted-number-processeddecimals =2type =text>
< / div>
< div class =form-itemid =edit-field-room-1-value-field-width-0-unit-wrapper>
< select name =field_room [1] [value] [field_width] [0] [unit]class =form-selectid =edit-field-room-1-value-field-width -0-unit>< option value =selected =selected> ---< / option>< option value =length_meter> m< / option>< option value =在< / option>< / select>中，length_foot> ft< / option>< option value =length_inch>
< / div>
< / div>
< / div>
< div class =form-itemid =edit-field-room-1-value-field-area-0-wrapper>
< label for =edit-field-room-1-value-field-area-0>区域：< / label>
< div class =container-inline>< div class =form-itemid =edit-field-room-1-value-field-area-0-value-wrapper> ;
< input maxlength =16name =field_room [1] [value] [field_area] [0] [value]id =edit-field-room-1-value-field-area-0 -valuesize =24value =class =form-text formatted-number formatted-number-processeddecimals =2type =text>
< / div>
< div class =form-itemid =edit-field-room-1-value-field-area-0-unit-wrapper>
< select name =field_room [1] [value] [field_area] [0] [unit]class =form-selectid =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> m 2的; /选项>< /选择>
< / div>
< / div>
< / div>
< / div>
< / div>
< / td>< td style =display：none; class =delta-order>< div class =form-itemid =edit-field-room-1-weight-wrapper>
< select name =field_room [1] [_ weight]class =form-select field_room-delta-orderid =edit-field-room-1-weight>< option value = - 2> -2< / option>< option value = - 1> -1< / option>< option value =0> 0< / option>< option value = 1selected =selected> 1< / option>< option value =2> 2< / option>< / select>
< / div>
< / td> < / TR>
< / tbody>
这将显示两个房间块 - 注意field_room []值。基本上我所做的是创建两个CCK内容类型 - Sheet和Room。房间有四个文本字段：名称，宽度，长度，面积 - 按顺序。名称是一个自动填充字段，宽度，长度和面积是测量值字段，意味着可以切换单元。然后，在Sheet内容类型中，我使用flexinode来创建一系列重复的房间内容类型。
我的jQuery有什么问题？ / p>
任何帮助不胜感激。 ：）
解决方案
在您的jQuery代码中，应该有父母而不是 parent for td lookup：
$ 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]'
$ parent.find（'input [id * =field-area-0-value]'）。val（length * width）;
}）;
}）;
I'm using Drupal to create a measurement sheet (Measurement sheets in Drupal 6) and am at a point where I have all the fields in place, I just need to write some jQuery that auto-updates the appropriate field when the user enters data. Code below:
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
}
);
});
This interacts with the following form code:
<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"> </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"> </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>
This displays two room blocks -- notice the field_room[] value. Essentially what I did was create two CCK content types -- Sheet and Room. Room has four text fields: Name, Width, Length, Area -- in that order. Name is an autocomplete field, Width, Length and Area are Measured Value Fields, meaning can switch the unit. Then, in the Sheet content type, I use flexinode to create a repeating series of room content types.
What's wrong with my jQuery?
Any help is appreciated. :)
解决方案
In your jQuery code, there should be parents used instead of parent for td lookup:
$parent = $(this).parents("td").children("div").children("div");
This makes area value to be calculated once width or length is changed.
EDIT:
There is also possible optimization of jQuery, for example to this (can be improved even more):
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);
});
});
这篇关于使用jQuery和Drupal6自动更新宽度/长度/面积的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！
查看全文
