Question

我有一个自动计算脚本，它使用xsanisty的jquery calx脚本。代码工作正常，但这些问题：

第一个号码未以货币显示。
选中复选框后。总数不会随着变化而变化。

这是我的代码：

HTML

<script type="text/javascript" src="http://prototype.xsanisty.com/calx/jquery-calx-1.1.8.min.js"></script>
<form id="booking_form">
  <input id="xChrg" type="checkbox">&nbsp;
<label for="xChrg"> Special Meal (Adult:300/Child:200)</label>
    <br />Adult : <span id="p1">2,000</span>
    <br />Child : <span id="p2">1,000</span>
    <hr />
    Adult : <select name="n1" id="n1">
        <option value="0">0</option>
        <option value="1">1</option>
        <option value="2">2</option>
        <option value="3">3</option>
        <option value="4">4</option>
    </select>
    Child : <select name="n2" id="n2">
        <option value="0">0</option>
        <option value="1">1</option>
        <option value="2">2</option>
        <option value="3">3</option>
        <option value="4">4</option>
    </select>
    <hr />
    <span name="total" id="total" data-format="฿ 0,0[.]00" data-formula="$n1*$p1+$n2*$p1" >฿</span> 
</form>

的jQuery

$(document).ready(function(){
    $('#booking_form').calx({});

    $('#xChrg').click(function () {
        if ($(this).is(':checked')) {
            $(this).siblings('#p1').html('2,300');
            $(this).siblings('#p2').html('1,200');
        } else {
            $(this).siblings('#p1').html('2,000');
            $(this).siblings('#p2').html('1,000');
        }
    });
});//]]>

我希望span＃total在点击#xChrg后立即更新数字。

这是一个演示：http://jsfiddle.net/nobuts/n7X7b/

Answer 1

从版本1.1.9开始，您可以像这样使用onupdate回调：

$('#booking_form').calx({onupdate : function(data){
    //Update your field here
    $('#myField').html(data);
}});

Answer 2

更新了您的代码以使用jQuery的onChange方法和toLocaleString来格式化您的货币值。

var price_adults = 2500;
var price_children = 2000;
var adults = $("#n1");
var children = $("#n2");
var total = $('#total');

$('#n1,#n2').on('change',function(){
    val = adults.val() * price_adults + children.val() * price_children;
    total.html(val.toLocaleString() + ' ฿');
});

或者，如果这会给您带来任何错误，请参阅此fork：http://jsfiddle.net/H3bFE/

Answer 3

我知道这回答为时已晚，但我希望这对其他有类似问题的人有用。

您可以尝试创建隐藏输入作为p1和p2的包装

脚本

    <script src="../jquery-calx-1.1.9.min.js"></script>
    <script type="text/javascript">
        $(document).ready(function(){
            $('#booking_form').calx({});
        });
    </script>

html

<form id="booking_form">
    <input id="xChrg" type="checkbox" value="1">&nbsp;
    <label for="xChrg"> Special Meal (Adult:300/Child:200)</label>
    <input type="hidden" id="p1" data-formula="IF($xChrg = 1, 2300, 2000)">
    <input type="hidden" id="p2" data-formula="IF($xChrg = 1, 1200, 1000)">
    <br />Adult : <span id="p1_shadow" data-formula="$p1" data-format="0,0"></span>
    <br />Child : <span id="p2_shadow" data-formula="$p2" data-format="0,0"></span>
    <hr />
    Adult : <select name="n1" id="n1">
        <option value="0">0</option>
        <option value="1">1</option>
        <option value="2">2</option>
        <option value="3">3</option>
        <option value="4">4</option>
    </select>
    Child : <select name="n2" id="n2">
        <option value="0">0</option>
        <option value="1">1</option>
        <option value="2">2</option>
        <option value="3">3</option>
        <option value="4">4</option>
    </select>
    <hr />
    <span name="total" id="total" data-format="฿ 0,0[.]00" data-formula="$n1*$p1+$n2*$p2" >฿</span>
</form>

以下是实时示例：http://prototype.xsanisty.com/calx/sample/so2.html

问候 Ikhsan

更新变量后如何更新和值？

3 个答案: