Question

我正在建立一个网站，用于预订火车上的座位。表单需要一个价格计算器来向客户显示总金额他/她在选择服务，乘客数量等时

为了使总成本的变化更加明显，我在div上使用了jq高亮效果，只是为了得到更多关注。

问题是我在滑块滑动时突出显示，所以如果我从0转到56（火车车厢的最大座位），则突出显示56次。

希望你能提供帮助，或建议一个更好的主意。

以下是代码：

$(document).ready(function(){   
    /**/
    function calculateTotal(){
        //var unitPrice = 2, paperTypes = 2, printedSides = 2;
        var precio_base  = $('#categoria option:selected').val();
        var cant_adultos = $("#adultos").val();

        var cant_ninos = $("#ninos").val();
        var sum = parseInt(cant_adultos) + parseInt(cant_ninos);
        var precio_productos = $("input[name^='servicio']").parseNumber();

        var totalCost = parseInt(precio_base)*parseInt(sum);

        $('#total-box').html("$"+totalCost);
        $('#total-box').effect("highlight", {}, 1000);
    }

    $('#categoria,#adultos,#ninos').change(calculateTotal).highlight();

});

页面位于http://www.micontrol.cl/~mvargas/wordpress/wp-transatacama/reservas-rapidas/form-reservas.php。

Answer 1

假设您正在使用jQuery UI中的滑块小部件（jQuery UI似乎包含在您链接到的页面上），您可以绑定到stop事件而不是change。像这样：

$("#yourSlider").bind("slidestop", calculateTotal).highlight();

Answer 2

您需要在每个幻灯片步骤中停止触发更改事件。只需在停止事件时触发。例如：http://jsbin.com/atolax/2

jquery亮点适用吨，如何避免它

2 个答案: