DOMが変更されたら処理を実行したい

変換前のDOM構造を確認します。

■元のPCサイト

商品チェック前

<tr> <td></td> <td>合計</td> <td class="sum">0円</td> </tr>

商品チェック後(テキストのみが変化)

<tr> <td></td> <td>合計</td> <td class="sum">150000円</td> </tr>

想定する変換後DOM

商品チェック前

<tr> <td></td> <td>合計</td> <td class="sum">0円</td> </tr> <tr> <td></td> <td>スマホ割引後</td> <td class="sum2">0円</td> </tr>

商品チェック後(合計金額×0.9の値を表示)

<tr> <td></td> <td>合計</td> <td class="sum">150000円</td> </tr> <tr> <td></td> <td>スマホ割引後</td> <td class="sum">135000円</td> </tr>

処理の記述

処理の記述はブラウザ変換ステージのPostJS editorで行います。

実行タイミングを”ノード追加・変更後”、ノードのセレクタを”td.sum”、種別を”この要素の子孫が変更されたとき”に選択します。

実行したい処理は、JavaScript で記載します。今回のサンプルでは以下のように記述します。

var sum = parseInt($("td.sum").text().replace("円","")); $("td.sum2").text(sum*0.9 + "円");

記述した処理の確認

コードのユニットテスト

記述した処理を単体で実行し、確認することができます。Ajax通信が完了した後のDOMに対して実行し、処理自体が正しく行われるかどうか確認します。

viewで確認

画面右側の End conversion view でAjax通信後から PostJS実行までの実際の動きを確認します。

注意事項

• 実行条件の”繰り返し”は処理実行後も対象のセレクタの監視を続けるかどうかの選択です。ユーザーの操作によって変化するなど、要素の変更回数が不確定の場合にチェックを入れます。