私はDrupalを使用して測定シート(Measurement sheets in Drupal 6)を作成していますが、すべてのフィールドがあるところにあります。ユーザーがデータを入力すると、適切なフィールドが自動的に更新されます。以下のコード:jQueryとDrupal6を使用して幅/長さ/面積を自動更新
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"> </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>
これは、2つの部屋ブロックを表示 - field_room []の値に注目してください。基本的には、2つのCCKコンテンツタイプ(シートとルーム)を作成しました。ルームには、名前、幅、長さ、面積の順に4つのテキストフィールドがあります。名前はオートコンプリートフィールド、幅、長さ、面積は測定値フィールドです。つまり、単位を切り替えることができます。次に、シートのコンテンツタイプでは、Flexinodeを使用して一連のルームコンテンツタイプを繰り返し作成します。
私のjQueryに問題がありますか?
ご迷惑をおかけして申し訳ございません。 :)あなたのjQueryコードで
ああ、私の神。あまりにも明白な何かを逃したとは思えません。ありがとうございました!!! – aendrew
どのように動作するかを見たい場合はjsbinを調べてください。[link](http://jsbin.com/olone5/edit) – rdamborsky