0

そのため、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を追加して合計を求めます。より良い解決策があれば、代わりにそれを喜んで使用します。私がやっていることは実際にはまったく意味がないのなら、ごめんなさい。

4

2 に答える 2

1

最初に、価格とその価格が適用されるグループとの関係を整理することをお勧めします。たとえば、class="numAdults" class="adultPrice"(子供の活動と価格についても同様に)、最終的には次のようになります。

<div class="activity" id="ACT001">

<label for="AdultNum">Adults(18+):</label>
<select data-inline="true" data-mini="true" id="ACT001-AdultNum" name="ACT001-AdultNum" class="numAdults">
    <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" class="adultPrice" />

<label for="ChildNum">Children(0-17):</label>
<select data-inline="true" data-mini="true" id="ACT001-ChildNum" name="ACT001-ChildNum" class="numChildren">
    <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" class="childPrice" /> 

<input type="text" id="ACT001-Sum" readonly="readonly" class="total" />

</div>

idそのマークアップを使用すると、アクティビティの数は問題になりません。これは、 やその他の手段を実行する必要がなく、クラス名を使用して関連する要素をターゲットにできるためです。その場合、次のように動作するはずです (ただし、現在はテストされていません)。

var pI = parseInt; // lazy way to access parseInt
function sumActivities(){
    $('.activity').each(
        function(){
            var that = $(this),
                numAdults = pI(that.find('.numAdults').val(),10),
                adultPrice = pI(that.find('.adultPrice').val(),10),
                numChildren = pI(that.find('.numChildren').val(),10),
                childPrice = pI(that.find('.childPrice').val(),10),
                total = pI((numAdults * adultPrice) + (numChildren * childPrice),10);
            that.find('.total').val(total);
            console.log(numAdults,adultPrice,numChildren,childPrice);
        });
}

JS フィドルのデモ

2 つ目のアクティビティ ボックスを表示する JS Fiddle を更新しました

于 2012-07-04T19:28:11.617 に答える
0
<script type="text/javascript">
    $(document).ready(function () {
        //        $("#Heading_FeeAllocation").append("<br/><select id='SelectStatus' width='15%' align=left><option value=Paid>Paid</option><option value=Pending>Pending</option><option value=Extra>Extra</option></select>");       


        $("#submit").bind("click", function () {
            Loader.Show();
        });

        $("#Select_FeeAllocation").live("change", function () {
            var selectedshiftid = $("#Select_FeeAllocation option:selected").val();
            $.each($("#TableStudent tr"), function (index, item) {
                if ($(item).find(".SelectCustom_FeeAllocation").is(":checked")) {
                    $(item).find(".Custom_FeeAllocation").attr('value', selectedshiftid);
                }
            });
        });

    });

    $("input:checkbox").live("click", function () {
            if ($(this).is(":checked")) {
                $(this).attr("value", "True");
            } else {
                $(this).attr("value", "False");
            }
        });
        $("#Add_All_Record").bind("click", function () {
            if ($(this).attr("checked") == "checked") {
                $("input.Select_FeeAllocation").attr("checked", "checked");
                $("input.Select_FeeAllocation").attr("value", "True");
            } else {
                $("input.Select_FeeAllocation").removeAttr("checked");
                $("input.Select_FeeAllocation").attr("value", "False");
            }
        });



        $('.amount').blur(function () {
    var sum = 0;
    $('.amount').each(function() {

        if($(this).val()!="")
         {
            sum += parseFloat($(this).val());
         }

    });
        $("#grosstotal").val(sum);
});​​​​​​​​​






</script>

<div class ="Left">
        <div class="widgetbox">
        <h3>
            <span>Student List</span></h3>
            <div class="content">
            <table cellpadding="0" cellspacing="0" class="sTable3" width="100%">
                <colgroup>
                    <col class="head1" width="5%" />
                    <col class="head0" width="8%" />
                    <col class="head1" width="20%" />
                    <col class="head0" width="10%" />
                    <col class="head1" width="7%" />
                    <col class="head0" width="10%" />
                    <col class="head1" width="10%" />
                    <col class="head0" width="10%" />
                    <col class="head1" width="10%" />
                    <col class="head0" width="10%" />
                </colgroup>

                <tbody>

                    <tr>
                        <th align="center">
                            <input type="checkbox" class="Check_All" id="Add_All_Record" name="Add_All_Record"
                                value="True" checked="checked">
                            Select All
                        </th>

                        @Html.Raw(ViewBag.Captions)

                        @*<th align="center" width="2%">
                            <input type="checkbox" class="Check_All" id="Add_All_Record" name="Add_All_Record"
                                value="True" checked="checked" />
                            Select All
                        </th>*@
                        @*<th align="center" width="5%">
                            Admission No
                        </th>
                        <th align="center" width="10%">
                            Student Name
                        </th>*@
                        <th align="center" width="20%">
                            Academic Year
                        </th>
                        <th align="center" width="20%">
                            Fee Type Name
                        </th>
                        <th align="center" width="20%"> 
                            Period Name
                        </th>
                        <th align="center" width="20%">
                            Fee Category Name
                        </th>
                         <th align="center" width="20%">
                            Amount
                         </th>

                    </tr>

                </tbody>
            </table>
            <form method="post" action="#" class="form_class" novalidate="novalidate" enctype="multipart/form-data">
            <table id="TableStudent" cellspacing="0" cellpadding="0" border="1" class="sTable3"
                width="100%">
                <tbody class="TableData">
                @{
                    var count=0;
                    string Transferprefix = "CUSTOM_STUDENT_FEEALLOCATION_DETAIL[{0}].";
                    string strTransferprefix = "";
                    //string STUDENT_NAME = ViewBag.Name;
                    //string Admission_No = ViewBag.Admission;
                    foreach (var student1 in ViewBag.StudList)
                   {
                       strTransferprefix = String.Format(Transferprefix,count);
                        <tr rownumber="@count" >
                         <td align="center" width="2%">
                        <input type="checkbox" name="@(strTransferprefix + "SELECTED_STUDENT")" id="@("SELECTED_STUDENT-" + count)" class="SelectStudent" value="True" checked="checked" />  
                         <input type="hidden" name="@(strTransferprefix + "Registration_Id")" id="@("Registration_Id-" + count)" value="@student1.Registration_Id" />
                                <input type="hidden" name="@(strTransferprefix + "Admission_No")" id="@("Admission_No-" + count)" value="@student1.Admission_No" />
                         </td>
                         </tr>



                    foreach (var student in ViewBag.FeesDetails)
                   {
                       //var count1 = 0;
                       //string Transferprefix1 = "CUSTOM_STUDENT_FEEALLOCATION_DETAIL[{0}].";
                       //string strTransferprefix1 = "";
                       strTransferprefix = String.Format(Transferprefix, count);
                        <tr rownumber="@count" >
                         <td align="center" width="2%">
                          @*<input type="checkbox" name="@(strTransferprefix + "SELECTED_STUDENT")" id="@("SELECTED_STUDENT-" + count)" class="SelectStudent" value="True" checked="checked" />
                                 <input type="hidden" name="@(strTransferprefix + "Registration_Id")" id="@("Registration_Id-" + count)" value="@student.Registration_Id" />
                                <input type="hidden" name="@(strTransferprefix + "Admission_No")" id="@("Admission_No-" + count)" value="@student.Admission_No" />*@
                                <input type="hidden" name="@(strTransferprefix + "Fee_Master_Id")" id="@("Fee_Master_Id-" + count)" value="@student.Fee_Master_Id" />
                                <input type="hidden" name="@(strTransferprefix + "Class_Id")" id="@("Class_Id-" + count)" value="@student.Class_Id" />
                                <input type="hidden" name="@(strTransferprefix + "Academic_Year_Id")" id="@("Academic_Year_Id-" + count)" value="@student.Academic_Year_Id" />
                                <input type="hidden" name="@(strTransferprefix + "Academic_Year_Name")" id="@("Academic_Year_Name-" + count)" value="@student.Academic_Year_Name" />
                                <input type="hidden" name="@(strTransferprefix + "Fee_Type_Name")" id="@("Fee_Type_Name-" + count)" value="@student.Fee_Type_Name"/>
                                <input type="hidden" name="@(strTransferprefix + "Period_Name")" id="@("Period_Name-" + count)" value="@student.Period_Name" />
                                <input type="hidden" name="@(strTransferprefix + "Fee_Category_Name")" id="@("Fee_Category_Name-" + count)" value="@student.Fee_Category_Name"/>
                                <input type="hidden" name="@(strTransferprefix + "Amount")" id="@("Amount-" + count)" value="@student.Amount" />
                                @*<input type="hidden" name="@(strTransferprefix + "grosstotal")" id="@("grosstotal-" + count)" value="@student.grosstotal" class= "Amount" />*@


                         </td>
                        @*<td align="center" width="5%">
                                @student.Admission_No
                            </td>
                            <td align="left" width="10%">
                                @student.STUDENT_NAME
                            </td>*@
                            <td align="left" width="20%">
                                @student.Academic_Year_Name
                            </td>
                            <td align="left" width="20%">
                                @student.Fee_Type_Name
                            </td>
                            <td align="left" width="20%">
                                @student.Period_Name
                            </td>
                            <td align="left" width="20%">
                                @student.Fee_Category_Name
                            </td>
                            <td align="center" width="20%">
                                @student.Amount
                            </td>


                            @*<td align="left" width="8%">
                              <select name="@(strTransferprefix + "Attendance")" id="@("Attendance-" + count)" class="Custom_FeeAllocation" style = "width:104px;" rownumber = "@count">
                                   <option value="Paid">Paid</option>
                                   <option value="Pending">Pending</option>
                                   <option value="Extra">Extra</option>                                  
                                   </select>
                            </td>*@


                    </tr>
                    }
                   }
                   }



                </tbody>

                </table>

                 <br />
                 <span style="float:right">TOTAL FEES &nbsp &nbsp
                <input type="text" id="grosstotal" name="grosstotal" value="" class="Amount"/></span> 
                <div class="form_default" style="clear: both;">
                <button id="submit" type="submit" value="submit" class="showbutton">
                    SUBMIT
                </button>
                <button id="btnCancel" type="button" class="showbutton">
                    Cancel</button>

                  </div>
                </form> 


              </div>                              

            </div>  




            </div>


i want to sum the amount column, using jquery, i have list of different fees like, Tution fee, transport fee, foe which Amount is given, i want the total for all the fees in grosstotal text. Thanks
于 2015-06-25T07:46:54.777 に答える