使用 jQuery 和 Drupal6 自动更新宽度/长度/面积 [英] Auto-updating width/length/area using jQuery and Drupal6

查看：18
本文介绍了使用 jQuery 和 Drupal6 自动更新宽度/长度/面积的处理方法，对大家解决问题具有一定的参考价值，需要的朋友们下面随着小编来一起学习吧！

问题描述

我正在使用 Drupal 创建测量表(Drupal 6 中的测量表) 并且现在我已经拥有所有字段，我只需要编写一些 jQuery 来在用户输入数据时自动更新适当的字段.代码如下:

jQuery(document).ready( function ($) {$('输入').change(功能() {$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();//获取宽度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.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);//放置区域});});

这与以下表单代码交互:

<thead class="tableHeader-processed"><tr><th colspan="2">测量:</th></tr></thead><tr class="draggableodd"><td class="content-multiple-drag"><a title="拖动重新排序" 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">房间:</label><input autocomplete="OFF" name="field_room[0][value][field_roomname][0][value]" id="edit-field-room-0-value-field-roomname-0-value" 大小="50" value="" class="form-text form-autocomplete text" type="text">

<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">长度:</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" 大小="24" value="" class="form-text formatted-number formatted-number-processed" decimals="2" type="text">

<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 class="form-item" id="edit-field-room-0-value-field-width-0-wrapper"><label for="edit-field-room-0-value-field-width-0">宽度:</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" 大小="24" value="" class="form-text formatted-number formatted-number-processed" decimals="2" type="text">

<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 class="form-item" id="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-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" 大小="24" value="" class="form-text formatted-number formatted-number-processed" decimals="2" type="text">

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

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

</td></tr><tr class="draggable even"><td class="content-multiple-drag"><a title="拖动重新排序" 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">房间:</label><input autocomplete="OFF" name="field_room[1][value][field_roomname][0][value]" id="edit-field-room-1-value-field-roomname-0-value" 大小="50" value="" class="form-text form-autocomplete text" type="text">

<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">长度:</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" 大小="24" value="" class="form-text formatted-number formatted-number-processed" decimals="2" type="text">

<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 class="form-item" id="edit-field-room-1-value-field-width-0-wrapper"><label for="edit-field-room-1-value-field-width-0">宽度:</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" 大小="24" value="" class="form-text formatted-number formatted-number-processed" decimals="2" type="text">

<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 class="form-item" id="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-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" 大小="24" value="" class="form-text formatted-number formatted-number-processed" decimals="2" type="text">

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

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

</td></tr></tbody>

这会显示两个房间块——注意 field_room[] 值.基本上我所做的是创建两种 CCK 内容类型——Sheet 和 Room.房间有四个文本字段:名称、宽度、长度、面积——按顺序排列.名称是自动补全字段，宽度、长度和面积是测量值字段，意思是可以切换单位.然后，在 Sheet 内容类型中，我使用 flexinode 创建一系列重复的房间内容类型.

我的 jQuery 有什么问题?

感谢任何帮助.:)

解决方案

在你的 jQuery 代码中，td<应该使用 parents 而不是 parent/code> 查找:

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

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

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屋！

查看全文
相关文章
前端开发最新文章
热门教程
热门工具
登录 关闭
扫码关注1秒登录
发送“验证码”获取 | 15天全站免登陆