تعديل (jQuery) JS لتضمين التعليمات البرمجية لتتبع التغييرات المنجزة على مربع الاختيار القائمة المنسدلة وتحديث السعر

Question

لدي رمز في جافا سكريبت وأنا أستخدم البرنامج المساعد حساب مسج (يمكن تنزيلها من رابط النص). النموذج الذي لدي هو نوع من نموذج عربة التسوق، أي تحديث الأسعار وفقا للكمية التي تم إدخالها. يحتوي النموذج على صناديق نصية تقبل الأرقام وهذا يدل على الكمية. بمجرد إدخال هذه الكمية / تم تعديلها، يتم تحديث السعر للنفس وفي الوقت نفسه، يتم تحديث المجموع الكبرى أيضا. حاليا، يسمح لي فقط بالعمل مع صناديق النص. أريد أن أكون قادرا على استخدام خانات الاختيار وقوائم المنسدلة في النموذج وتريد رمز JS للتعامل مع تحديث السعر والإجمالي الكبرى وإظهاره على الفور (تماما كما ستفعل في حالة صناديق النص الحالية الحالية). حاولت هذا على متن محلي الخاص بي، لكنني انتهيت من تقسيم الوظيفة الحالية أو الرمز المحدث لا يعمل فقط في خانات الاختيار وقوائم المنسدلة.

النموذج الذي لدي حتى الآن هو:

 <script src="js/jquery-1.3.2.min.js" type="text/javascript"></script>
<script src="js/jquery.calculation.js" type="text/javascript"></script>


<SCRIPT type="text/javascript">
var bIsFirebugReady = (!!window.console && !!window.console.log);

$(document).ready(
    function (){
        // update the plug-in version
        $("#idPluginVersion").text($.Calculation.version);


        // bind the recalc function to the quantity fields
        $("input[name^=qty_item_]").bind("keyup", recalc);
        // run the calculation function now
        recalc();

        // automatically update the "#totalSum" field every time
        // the values are changes via the keyup event
        $("input[name^=sum]").sum("keyup", "#totalSum");

        // automatically update the "#totalAvg" field every time
        // the values are changes via the keyup event
        $("input[name^=avg]").avg({
            bind:"keyup"
            , selector: "#totalAvg"
            // if an invalid character is found, change the background color
            , onParseError: function(){
                this.css("backgroundColor", "#cc0000")
            }
            // if the error has been cleared, reset the bgcolor
            , onParseClear: function (){
                this.css("backgroundColor", "");
            }
        });

        // automatically update the "#minNumber" field every time
        // the values are changes via the keyup event
        $("input[name^=min]").min("keyup", "#numberMin");

        // automatically update the "#minNumber" field every time
        // the values are changes via the keyup event
        $("input[name^=max]").max("keyup", {
            selector: "#numberMax"
            , oncalc: function (value, options){
                // you can use this to format the value
                $(options.selector).val(value);
            }
        });

        // this calculates the sum for some text nodes
        $("#idTotalTextSum").click(
            function (){
                // get the sum of the elements
                var sum = $(".textSum").sum();

                // update the total
                $("#totalTextSum").text("$" + sum.toString());
            }
        );

        // this calculates the average for some text nodes
        $("#idTotalTextAvg").click(
            function (){
                // get the average of the elements
                var avg = $(".textAvg").avg();

                // update the total
                $("#totalTextAvg").text(avg.toString());
            }
        );
    }
);

function recalc(){
    $("[id^=total_item]").calc(
        // the equation to use for the calculation
        "qty * price",
        // define the variables used in the equation, these can be a jQuery object
        {
            qty: $("input[name^=qty_item_]"), 
            price: $("[id^=price_item_]"),

        },
        // define the formatting callback, the results of the calculation are passed to this function
        function (s){
            // return the number as a dollar amount
            return "$" + s.toFixed(2);
        },
        // define the finish callback, this runs after the calculation has been complete
        function ($this){
            // sum the total of the $("[id^=total_item]") selector
            var sum = $this.sum();

            $("#grandTotal").text(
                // round the results to 2 digits
                "$" + sum.toFixed(2)
            );
        }
    );
}
</SCRIPT> 



<form name="form1" method="post" action="">

<div id="formContent">

  <P id="ex-sum">
  <table width="500">
                <COL style="width: 50px;">
                <COL>
                <COL style="width: 60px;">
                <COL style="width: 110px;">
                <tbody><tr>
                    <th width="179">
                        Qty
                    </th>
                    <th width="164" align="left">
                        Product
                    </th>
                    <th width="72">
                        Price
                    </th>
                    <th width="65">
                        Total
                    </th>
                </tr>
                <tr>
                    <td align="center">
                        <INPUT name="qty_item_1" type="text" class="input" id="qty_item_1" value="1" size="5">
                  </td>
                    <td>Table</td>
                    <td align="center" id="price_item_1">
                        $150
                    </td>
                    <td align="center" id="total_item_1">$</td>
                </tr>
                <tr>
                    <td align="center">
                        <INPUT name="qty_item_2" type="text" class="input" id="qty_item_2" size="5">
                  </td>
                    <td>
                        Pencil</td>
                    <td align="center" id="price_item_2">
                        $100</td>
                    <td align="center" id="total_item_2">$</td>
                </tr>
                <tr>
                    <td align="center">
                        <INPUT name="toys" type="checkbox" id="toys" value="1">
              </td>
                  <td>
                        Toys</td>
                    <td align="center" id="price_item_3">
                        $50</td>
                    <td align="center" id="total_item_3">$</td>
                </tr>  

              <tr>
                    <td align="center"><select name="books" id="books">
                      <option selected="selected">Select an option</option>
                      <option value="1">Book1</option>
                      <option value="1">Book2</option>
                      <option value="1">Book3</option>
                    </select></td>
                  <td>
                        Books</td>
                    <td align="center" id="price_item_3">
                        $10</td>
                    <td align="center" id="total_item_3">$</td>
                </tr>

                <tr>
                    <td colspan="3" align="right">
                        <STRONG>Grand Total:</STRONG>
                    </td>
                    <td align="center" id="grandTotal">$</td>
                </tr>
            </tbody></table>
</div>

</form>

أيضا كما ترون رمز النموذج أعلاه، يتم استخدام الجداول فيه. هل هناك على أي حال لتحقيق ما أحاول القيام به دون استخدام الجداول؟

شكرا لكم جميعا مقدما.

Answer 1

ليس إجابة حقيقية. فقط بعض الملاحظات التي لا تناسب التعليق.

لدي شعور بأنك فعلت للتو بعض معجون النسخ وليس لديهم فهم حقيقي كيف يعمل هذا البرنامج المساعد لهذا الحساب. والآن تريد شخص آخر لمعرفة ذلك.

فقط بعض الأمثلة:

• لقد قمت بتضمين العديد من الوظائف (MIN، MAX، AVG) التي لا تستخدمها وعناصر لعرض هذه القيم مفقودة أيضا.

• تم تكوين رمز الحساب الخاص بك للتحقق من inputأين nameتبدأ السمة مع qty_item_ ولكن لديك checkbox و select لديك سمة اسم مختلفة تماما.

• إعادة الحساب مرتبطة أساسا ب keyup الحدث الذي لن ينطلق بوضوح checkbox و select ما لم يستخدم المستخدم لوحة المفاتيح بدلا من الماوس لتحديد القيم

• لا يبدو أنك تستخدم مسج المجال البرنامج المساعد على الرغم من أن المكون الإضافي للحساب ينص على أنك تحتاج إلى ذلك إذا كنت ترغب في استخدام المدخلات المختلفة text

---

ولكن لأنك اصطادتني في مزاج جيد، قمت بإجراء صفحة تجريبية تعمل بسيطة لك بناء على الرمز الخاص بك.

http://jsbin.com/asepe3.

لكنني لن أشرح ذلك بشكل إضافي، وأيضا عمليات الشيكات المعنية (تسمح بأرقام عدد صحيح إيجابي فقط) مفقودة وغيرها من الأشياء.