Question

我需要更新我的＆＃39; calculated_price＆＃39;当用户选中我的一个复选框时，值就会生效。 alert（）可以正常工作和计算，但我不知道它为什么只显示＆＃39; 0＆＃39; 0而不是改变。

$(document).ready(function () {
    //Global Configurations.
    var calculated_price = 0;
    var final_price = "قیمت نهایی برابر است با " + calculated_price + " تومان ";

    // Menu Items.
    var cbSelector = $("[name='cb[]']");
    cbSelector.change(function () {
        if (this.checked){
            var currentCBSelected = $(this);
            var currentCBValue = parseInt(currentCBSelected.val());

            var previousNSelected = $(this).prev("input");
            var previousNValue = parseInt(previousNSelected.val());

            previousNSelected.css("visibility","visible");

            calculated_price += currentCBValue * previousNValue;
        }
        else {
            // Do somethings.
        }

    });

    // Calculated Price.
    $("#calculated_price").html(final_price);

});

这是我的index.html文件，它将检查复选框以显示其值可以更改的数字输入（因此compute_price必须更改）

    <!-- Page Logo -->
    <div>
        <a href="#time_picker"><img id="page_logo" src="img/logo.png"></a>
    </div>

    <!-- Time Picker -->
    <div id="time_picker">
        <div id="time_picker_in">
            <p>زمان ورود: </p>
        </div>
        <div id="time_picker_out">
            <p>زمان خروج: </p>
        </div>
    </div>

    <!-- Menu Items -->
    <div>
        <ul id="menu_items">
            <li>
                <input type="number" name="n[]" value="1" class="num_input"/>
                <input type="checkbox" name="cb[]" value="12000" />
                <label for="text1">چای و ساید کیک</label>
            </li>
            <li>
                <input type="number" name="n[]" value="1" class="num_input"/>
                <input type="checkbox" name="cb[]" value="5000" />
                <label for="text2">چای سیاه</label>
            </li>
            <li>
                <input type="number" name="n[]" value="1" class="num_input"/>
                <input type="checkbox" name="cb[]" value="7000" />
                <label for="text3">چای سبز</label>
            </li>
            <li>
                <input type="number" name="n[]" value="1" class="num_input"/>
                <input type="checkbox" name="cb[]" value="7000" />
                <label for="text4">چای و خرما</label>
            </li>
            <li>
                <input type="number" name="n[]" value="1" class="num_input"/>
                <input type="checkbox" name="cb[]" value="7000" />
                <label for="text5">چای و نبات</label>
            </li>
            <li>
                <input type="number" name="n[]" value="1" class="num_input"/>
                <input type="checkbox" name="cb[]" value="7000" />
                <label for="text6">چای و دارچین</label>
            </li>
            <li>
                <input type="number" name="n[]" value="1" class="num_input"/>
                <input type="checkbox" name="cb[]" value="15000" />
                <label for="text7">آبمیوه(پرتقال،هندوانه،طالبی)</label>
            </li>
            <li>
                <input type="number" name="n[]" value="1" class="num_input"/>
                <input type="checkbox" name="cb[]" value="15000" />
                <label for="text8">هات چاکلت</label>
            </li>
            <li>
                <input type="number" name="n[]" value="1" class="num_input"/>
                <input type="checkbox" name="cb[]" value="15000" />
                <label for="text9">نسکافه</label>
            </li>
            <li>
                <input type="number" name="n[]" value="1" class="num_input"/>
                <input type="checkbox" name="cb[]" value="15000" />
                <label for="text10">کاپوچینو</label>
            </li>
            <li>
                <input type="number" name="n[]" value="1" class="num_input"/>
                <input type="checkbox" name="cb[]" value="15000" />
                <label for="text11">شکلات گلاسه</label>
            </li>
            <li>
                <input type="number" name="n[]" value="1" class="num_input"/>
                <input type="checkbox" name="cb[]" value="15000" />
                <label for="text12">سالاد روز</label>
            </li>
            <li>
                <input type="number" name="n[]" value="1" class="num_input"/>
                <input type="checkbox" name="cb[]" value="10000" />
                <label for="text13">سیب زمینی</label>
            </li>
            <li>
                <input type="number" name="n[]" value="1" class="num_input"/>
                <input type="checkbox" name="cb[]" value="15000" />
                <label for="text14">غذای روز کودک</label>
            </li>
            <li>
                <input type="number" name="n[]" value="1" class="num_input"/>
                <input type="checkbox" name="cb[]" value="10000" />
                <label for="text15">بستنی(12 اسکوپ)</label>
            </li>
        </ul>
    </div>

    <!-- White Space -->
    <div id="white_space"></div>

    <!-- Calculated Price -->
    <div id="calculated_price"></div>

Answer 1

问题似乎是您希望对calculated_price变量的更改自动反映在您的final_price字符串中，但它不会那样工作。每次calculate_price变量更改时，您都必须将其插入到final_price字符串中，然后再次更新html。

更改此行：

var final_price = "قیمت نهایی برابر است با " + calculated_price + " تومان ";

为：

var final_price = "قیمت نهایی برابر است با {calc} تومان ";

在if语句的末尾添加以下行：

$("#calculated_price").html(final_price.replace("{calc}", calculated_price.toString());

将最后一行更改为：

$("#calculated_price").html(final_price.replace("{calc}", calculated_price.toString());

将if语句中的变量值传递给if / else之外

1 个答案: