そのため、MVCを使用してアクティビティのXMLファイルを解析し、ページに各アクティビティを表示しています。各アクティビティには独自の価格/大人と価格/子供があり、ユーザーは以前に送信したフォームに基づいて大人と子供の数を選択できます。各アクティビティには独自の合計価格があります。たとえば、スカイダイビングは大人1人あたり5ドル、子供1人あたり1ドルです。大人4人と子供3人を選んだとすると、アクティビティ要素の合計価格は23ドルになります。
問題は、N個のアクティビティを受け取ることができるため、jqueryでこれを行う方法です。1つのアクティビティ要素は次のようになります(簡単にするために非常にわかりやすくしました)。
Razorを使用したHTML
<li>
<div class="activity" id="@item.ActivityID"> <!--id="ACT001"-->
@Html.DropDownList(item.ActivityID+"-AdultNum", AdultNum,
new { data_mini="true", data_inline="true" })<br /> <!--id="ACT001-AdultNum-->
Price/Adult C$:@Html.TextBox(item.ActivityID+"-AdultPrice", item.PricePerAdult,
new { @readonly = "readonly"}) <!--id="ACT001-AdultPrice-->
@Html.DropDownList(item.ActivityID+"-ChildNum", ChildNum,
new { data_mini="true", data_inline="true" })<br /> <!--id="ACT001-ChildNum-->
Price/Child C$: @Html.TextBox(item.ActivityID+"-ChildPrice", item.PricePerChild,
new { @readonly = "readonly"})
<input type="text" readonly="readonly" id="@item.ActivityID-Sum"/><!--id="ACT001-Sum"-->
</div>
</li>
MVCによって生成されたHTML
<li>
<div class="activity" id="ACT001">
<label for="AdultNum">Adults(18+):</label>
<select data-inline="true" data-mini="true" id="ACT001-AdultNum" name="ACT001-AdultNum">
<option value="1">1</option>
<option value="2">2</option>
<option value="3">3</option>
<option value="4">4</option>
</select><br />
Price/Adult C$:<input id="ACT001-AdultPrice" name="ACT001-AdultPrice"
readonly="readonly" type="text" value="19.00" />
<label for="ChildNum">Children(0-17):</label>
<select data-inline="true" data-mini="true" id="ACT001-ChildNum" name="ACT001-ChildNum">
<option value="0">0</option>
<option value="1">1</option>
<option value="2">2</option>
<option value="3">3</option>
</select><br />
Price/Child C$: <input id="ACT001-ChildPrice" name="ACT001-ChildPrice"
readonly="readonly" type="text" value="11.00" />
<input type="text" id="ACT001-Sum" readonly="readonly"/>
</div>
</li>
つまり、基本的にACT001-Sum = ACT001-AdultNum * ACT001-AdultPrice + ACT001-ChildNum*ACT001-ChildPriceが必要です。ただし、これは1つのアクティビティであり、N個のアクティビティがあります。2番目のアクティビティはACT002-Sum、ACT002-AdultNum、ACT002-AdultPrice、ACT002-ChildNumのこの形式に従い、3番目のアクティビティはACT003...などになります。
これを解決するために、jqueryで1つの基本関数を使用するにはどうすればよいか疑問に思いました。私はこのようなことについて大まかな考えを持っていますが、まだそれを考えていません。この部分の助けをいただければ幸いです。
<script type="text/javascript">
$('.activity').each(function() {
var id = $(this).attr("id"); <!--take the "ACT001" part" -->
var adultnum = id + "-AdultNum";
var adultprice = id + "-AdultPrice";
var childnum = id + "-ChildNum";
var childprice = id + "-ChildPrice";
$(#id+"-Sum").val(#adultnum.val() * #adultprice.val() +
#childnum.val() * #childprice());
});
</script>
構文がすべて間違っていることは確かですが、基本的には各アクティビティのIDを取得し、-AdultNum、-AdultPrice、-ChildNum、および-ChildPriceを追加して合計を求めます。より良い解決策があれば、代わりにそれを喜んで使用します。私がやっていることは実際にはまったく意味がないのなら、ごめんなさい。